CSS3最常⽤选择器总结笔记⼀、基础选择器
1.1 继承 (0000)
<style>div{color: red;}</style>
<div><p>继承0000</p></div>
1.2 元素选择器(0001)
<style>div{color: red;}</style>
<div>元素选择器0001</div>
1.3 类选择器(0010)
<style>.cl{color: red;}</style>
<div class="cl">类选择器0010</div>
1.4 ID选择器(0100)
<style>#id{color:red;}</style>
<div id="id">ID选择器0100</div>
1.5 ⾏内样式(1000)
<div id="id">⾏内样式1000</div>
1.6 !important(⽆穷⼤)
<style>#id{color:red !important;}</style>
<div id="id">!important(⽆穷⼤)</div>
⼆、属性选择器(0010)
2.2 E[att] 选择具有att属性的E元素
<style>div[id]{color: red;}</style>
<div id="demo">demo</div>
2.2 E[att=“val”] 选择具有att属性的E元素且属性值等于val的元素
css 属性选择器<style>div[id="demo"]{color: red;}</style>
<div id="demo">demo</div>
2.3 E[att^=“val”] 选择具有att属性的E元素且值以val开头的元素
<style>div[id^="demo"]{color: red;}</style>
<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
<div id="demo3">demo3</div>
2.4 E[att$=“val”] 选择具有att属性的E元素且值以val结尾的元素
<style>div[id$="demo"]{color: red;}</style>
<div id="o_demo">o_demo</div>
<div id="t_demo">t_demo</div>
<div id="s_demo">s_demo</div>
2.5 E[att*=“val”] 选择具有att属性的E元素且值含有val的元素
<style>div[id*="demo"]{color: red;}</style>
<div id="o_demo_o">o_demo_o</div>
<div id="t_demo_t">t_demo_t</div>
<div id="s_demo_s">s_demo_s</div>
三、结构伪类选择器(0010)
3.1 E:first-child 匹配⽗元素中第⼀个⼦元素E
<style>
ul li:first-child{
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.2 E:last-child 匹配⽗元素中最后⼀个元素E
<style>
ul li:last-child{
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.3 E:nth-child(n) 匹配⽗元素中的第n个元素E
n可以是公式，数字，关键字，even(偶数) , odd(奇数) <style>
ul li:nth-child(even){
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.4 E:first-of-type 指定类型E的第⼀个
<style>
ul li:first-of-type{
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.5 E:last-of-type 指定类型E的最后⼀个
<style>
ul li:last-of-type{
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.6 E:nth-of-type 指定类型E的第n个
n可以是公式，数字，关键字，even(偶数) , odd(奇数)
<style>
ul li:nth-of-type(even){
color: red;
}
</style>
<ul>
<li>孩⼦1</li>
<li>孩⼦2</li>
<li>孩⼦3</li>
<li>孩⼦4</li>
</ul>
3.7 E:nth-child与E:nth-of-type的区别
(1) nth-child 对⽗元素⾥⾯所有孩⼦排序选择(序号固定) 先到第n个孩⼦，然后看看是否和E匹配。
(2) nth-of-type对⽗元素⾥⾯指定⼦元素进⾏排序选择，先对E元素进⾏排序后，在去匹配第⼏个。
3.8 E:nth-of-last-type 和 E:nth-last-child
跟nth-of-last-type和nth-last-child⼀样，只不过顺序是反过来。
3.9伪类选择器(0010)
3.9.1 链接选择器
（1）a:link 选择所有未被访问的链接
（2）a:visited 选择所有已被访问的链接
（3）a:hover /选择⿏标指针位于其上的链接
（4）a:active 选择活动链接(⿏标按下未弹起的链接)
3.9.2 focus伪类选择器(⽤于获取焦点的表单元素)
(1) input:focus{background-color:red}
3.9.3 p伪类选择器
（1）p:letter 选择每个p元素中的⾸字母
（2）p:first 选择每个p元素中的⾸⾏
四、伪元素选择器(0001)
4.1 ::before 在元素内部的前⾯插⼊内容
4.2 ::after 在元素内部的后⾯插⼊内容
4.3 注意点：
（1）before和after创建⼀个元素，他们属于⾏内元素
（2）新创建的这个元素在⽂档树中是不到的。
（3）before和after必须有content属性
五、复合选择器(权重叠加)
5.1后代选择器
<style>.demo p{color: red;</style>
<div class="demo">
<div><p>孩⼦⼀</p></div>
<p>孩⼦⼆</p>
<p>孩⼦三</p>
<div id="demo1"><div><p>孩⼦四</p></div></div>
</div>
<!--只要属于⽗容器(demo)中的后代，不管嵌套的多深，都会被选中--> 5.2⼦选择器
<style>.demo>p{color: red;</style>
<div class="demo">
<div><p>孙⼦</p></div>
<p>孩⼦⼀</p>
<p>孩⼦⼆</p>
<div id="demo1"><div><p>曾孙⼦</p></div></div>
</div>
<!--选择⽗容器(demo)中的孩⼦-->
5.3并集选择器
<style>.demo,p{color: red;</style>
<div class="demo">demo</div>
<p>demo</p>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论