CSS3新增选择器
结构伪类选择器
假设有如下结构
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
我们经常是要选定某个li
,设置其样式,所以这个时候我们就得为该li
加上类名,而CSS3
提供了结构伪类选择器,就不需要添加类名了,比如我要选择第一个li
,可以写为
li:first-child {
}
要选定最后一个元素可以写为
li:last-child {
}
选定第4
个可写为
li:nth-child(4) {
}
li:first-child {
background-color: red;
}
li:last-child {
background-color: blue;
}
li:nth-child(4) {
background-color: green;
}
![](https://i-blog.csdnimg.cn/blog_migrate/889f5e7198cf273da070c842ab0d5b42.png)
如果要选定所有序号为偶数的,可以写为
li:nth-child(even) {
}
同理选择为奇数的可写为
li:nth-child(odd) {
}
li:nth-child(even) {
background-color: skyblue;
}
li:nth-child(odd) {
background-color: pink;
}
![](https://i-blog.csdnimg.cn/blog_migrate/7d8b81bd75e41ef931b2e998f2990d4f.png)
如果想选择所有3
的倍数的,可以写为
li:nth-child(3n) {
background-color: yellow;
}
![](https://i-blog.csdnimg.cn/blog_migrate/a1d11f9947d933697012e4275cc6a815.png)
同理,也可以选择4
的倍数等等。
属性选择器
假设有如下的结构
<div class="one"></div>
<div></div>
<div></div>
<div class="two"></div>
设置样式为
div {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
}
显示效果为
![](https://i-blog.csdnimg.cn/blog_migrate/3850d6e44e08e3361a367162611e5269.png)
属性选择器的意思是,根据该标签是否有该属性而选择,比如我要选择所有含有class
属性的盒子,那么我可以写为
div[class] {
}
div[class] {
background-color: pink;
}
![](https://i-blog.csdnimg.cn/blog_migrate/c88daed0716660d4edbbcf6508d03a5d.png)
除了这种写法,还有三种其他的写法,比如
div[class^=font] { /*选择所有类名以font开头的类*/
}
div[class$=font] { /*选择所有类名以font结尾的类*/
}
div[class*=font] { /*选择所有类名中包含font的类*/
}
伪元素
下面我将介绍5
个伪元素,前面3
个了解就可以,后面两个需要熟练掌握。
假设有以下结构
<p>人民网新华网央视网网信网中国网国际在线中国日报网中国经济网光明网央广网求是网中青在线</p>
使用first-letter
可以选择出第一个文字,如下
p::first-letter {
font-size: 30px;
color: red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/429b10fe2f50160dd2c3da73f64b80ed.png)
使用first-line
可以改变第一行文字的样式
p::first-line {
color: red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/e267959e1829a1f859a098002fdce327.png)
使用selection
可以改变选中文本的样式,比如
p::selection {
color : white;
background-color: red; /*选中的文本红底白字*/
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a3c7a5dee52eef2e9e8e5f20a861a25.png)
假设有以下结构
<div>要</div>
现在使用before
伪元素
div::before {
content: "我";
}
那么效果是
![](https://i-blog.csdnimg.cn/blog_migrate/a62f2d04ede7b5f0b5a759f561ae174d.png)
可以发现在"要"字前面出现了一个"我",可以将before
理解为在div
内容前面的一个盒子,盒子里的内容为"我"。注意,before
盒子是在div
盒子里面的。
那么同理就可以明白after
就是在div
内容后面的一个盒子,before
盒子和after
盒子可以看做是div
的子盒子。
div::after {
content: "飞";
}
![](https://i-blog.csdnimg.cn/blog_migrate/fe7a8ac57ee95287167947e7643769f4.png)