105 lines
2.6 KiB
HTML
105 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
.span {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: pink;
|
||
}
|
||
|
||
.test {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: blanchedalmond;
|
||
}
|
||
|
||
.test:hover {
|
||
background-color: blue;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
给html添加样式有三种:
|
||
1.行内样式
|
||
<p style="width: 100px;height: 100px;background-color:red">我是段落标签</p>
|
||
2.在head头标签里面书写style样式
|
||
<span class="span">我是span标签</span>
|
||
3.外链样式
|
||
<link rel="stylesheet" href="./test.css">
|
||
<div id="a">我是div标签</div>
|
||
|
||
选择器类型:
|
||
1.标签选择器,直接选择标签添加样式
|
||
2.class选择器,通过给标签添加class值,然后在样式使用.的方式添加样式
|
||
3.id选择器,通过给标签添加id值,然后在样式使用#的方式添加样式,口头约定id的值不能重复,与js配套使用
|
||
4.通配符选择器,*{},选择所有的标签并设置样式
|
||
5.伪类选择器,:hover鼠标经过
|
||
<p class="test">test</p>
|
||
|
||
<style>
|
||
p,
|
||
ul {
|
||
/* 同时选中p标签和ul标签 */
|
||
}
|
||
|
||
ul li {
|
||
/* 选中ul里面所有的li */
|
||
}
|
||
|
||
ul>li {
|
||
/* 作用和上面的是差不多 */
|
||
}
|
||
|
||
ul div+li {
|
||
/* 选择ul里面的div和同级最近的li(只选择第一个li) */
|
||
}
|
||
|
||
li:nth-child(2n+1) {
|
||
/* 里面的2n+1,分开来看,右边的+1代表从第一个开始,左边的2n就是隔俩个,这句话的意思就是从第一个开始,然后隔俩个 */
|
||
|
||
}
|
||
|
||
/* 从第5个开始，到最后 */
|
||
ul li:nth-child(n+5) {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: red;
|
||
}
|
||
|
||
/* 前俩个 */
|
||
ul li:nth-child(-n+2) {
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: skyblue;
|
||
}
|
||
|
||
/* 伪元素 */
|
||
ul li:nth-child(10)::after {
|
||
content: '111';
|
||
background-color: pink;
|
||
}
|
||
|
||
</style>
|
||
<p></p>
|
||
<ul>
|
||
<div>0</div>
|
||
<li>1</li>
|
||
<li>2</li>
|
||
<li>3</li>
|
||
<li>4</li>
|
||
<li>5</li>
|
||
<li>6</li>
|
||
<li>7</li>
|
||
<li>8</li>
|
||
<li>9</li>
|
||
</ul>
|
||
</body>
|
||
|
||
</html> |