标签：col red eve ora family ping strong color before
1、标签选择器
<div>文本</div>
选择器 : div { color: red }
2、类选择器
<div class="text">文本</div>
选择器 : .text { color: red }
3、ID选择器
<div id="text">文本</div>
选择器 : #text { color: red }
4、后代选择器
<div>第一层
<p class="second">第二层
<span id="third‘>第三层</span>
</p>
</div>
选择器 : div .second { color: green }
选择器 : div #third { color: blue }
5、子代选择器
<div>第一层
<p class="second">第二层
<span id="third‘>第三层</span>
</p>
</div>
选择器 : div > .second { color: green }
选择器 : div > .second > #third { color: blue }
6、兄弟相邻选择器
写法：A+B{} 表示选择A标签后面相邻的兄弟标签B
<div>文本1</div>
<div>文本1</div> // 有边框
<div>文本1</div> // 有边框
选择器 : div + div { border: 1px solid red }
7、兄弟选择器
写法: A~B{ } 表示选择器A标签后面 的兄弟标签B，A标签与B标签可以不相邻
<div class="box1">文本1</div>
<div class="box2">文本1</div>
<div class="box3">文本1</div> // 有边框
选择器 : .box1 ~ .box3 { border: 1px solid red }
8、属性选择器
通过标签的属性 来选择标签
属性选择器本身 与 类选择器权重相同
（1）[属性名称]
<div class="box">文本1</div>
[class] {color: red}
div[class] {color: red}
（2）[属性名称=“属性值”]
<div class="box">文本1</div>
[class="box"] {color: red}
div[class="box"] {color: red}
8、伪类选择器
选择器上带:号的 特征大部分的就是伪类选择器，伪类选择器 是专门选择一些状态特征内容
A:hover{ color:red } 表示鼠标移入到A标签上的时候 选择A标签设置样式为字体 颜色红色
<div class="box">文本1</div>
div:hover{color: green}
9、css3选择器
（1）first-child、last-child
A:first-child表示选择标签里面 位置为第一的子标签A
B:last-child表示选择标签里面 位置为最后一个子标签B
<div>
<span>111</span>
<span>222</span>
<span>333</span>
<span>444</span>
</div>
div span:first-child{color: red} //选择第一个标签
div span:last-child{color: green} //选择最后一个标签
（2）nth-child( )
选择奇数位置或偶数位置的标签；从1开始
<div>
<span>111</span>
<span>222</span>
<span>333</span>
<span>444</span>
</div>
div span:nth-child(1){color: blue} //选择第一个span标签
div span:nth-child(3n+1){color: blue} //选择第1、4、7...个span标签
div span:nth-child(odd){color: red} // 选择奇数的span标签
div span:nth-child(even){color: green} // 选择偶数的span标签
（3）first-of-type、last-of-type
A:first-of-type{ } 表示选择标签里面 类型为第一个的子标签A
A:last-of-type{ } 表示选择标签里面 类型为子标签A的 最后一个标签
<div>
<span>111</span>
<p>222</p> // 红色
<b>333</b>
<p>444</p> // 绿色
</div>
div p:first-of -type{color: red}
div p:last-of -type{color: green}
（4）nth-of-type( )
<div>
<span>111</span>
<p>222</p>
<b>333</b>
<p>444</p> // 红色
</div>
div p:nth-of-type(2) {color: red}
（5）not( )
排除某一类的选择器
<span>111</span> // 红色
<p>222</p>
<b>333</b> // 红色
<p>444</p>
not([p]){color: red}
10、伪元素
<div class="box">文本1</div>
div:before{
content: "前文本";
color: red
}
div:after{
content: "后文本";
color: red
}
伪元素使用hover
div:hover:after{ // 鼠标移入div上，after标签文本边绿色
content: "后文本";
color: green
}
选择器的权重比较：默认样式 < 标签名称选择器 < 类选择器 < id选择器 < style属性样式
标签：col red eve ora family ping strong color before
原文地址：https://www.cnblogs.com/cuishuangshuang/p/12622600.html
