1. X:checked
input[type=radio]:checked{border: 1px solid black;}
这个伪类选择器只会作用于被选中的用户界面元素(user interface element),比如说单选按钮,或者复选框。
2. X:before、X:after
p:after{content:"台词:";background-color:yellow;color:red;font-weight:bold;}
在每个
元素后面插入内容,并设置所插入内容的样式:
3. E:link:匹配所有未被点击的链接
E:visited:匹配所有已被点击的链接
E:active:匹配鼠标已经其上按下、还没有释放的E元素
E:hover:匹配鼠标悬停其上的E元素
E:focus:匹配获得当前焦点的E元素
4. E:target:匹配文档中特定”id”点击后的效果。
5. X:not(Selector)
div:not(#container) {color: blue;}
选择除#container层外的所有div层。
6. X:PseudoElement
使用这类伪类(用::指定)可以设计一个元素的一片断,如第一行,或第一个字。这伪类只能作用于块元素。
选择段落的第一个字符
p:first-letter {font-size: 2em;}
选择段落的第一行
p:first-line {font-size: 1.2em;}
7. X:nth-Child(an+b)
用法一:数字序号:nth-child(number):直接匹配第number个元素。number必须为大于0的整数。 li:nth-child(3){}/*第3个LI*/ 用法二:倍数写法:nth-child(an):匹配所有倍数为a的元素。字母n是倍数写法的标志,如3n、5n。 li:nth-child(3n){}/*第3、第6、第9、…、所有3的倍数的LI*/ 用法三:倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b):a,b均为正整数或0。如3n+1、5n-1。 li:nth-child(3n+1){}/*匹配第1、第4、第7、…/ li:nth-child(3n+5){}/*匹配第5、第8、第11、…/ li:nth-child(5n-1){}/*匹配第5-1=4、第10-1=9、…/ li:nth-child(3n±0){}/*相当于(3n)*/ li:nth-child(±0n+3){}/*相当于(3)*/ 用法四:反向倍数分组匹配:nth-child(-an+b):倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。 li:nth-child(-3n+8){}/*匹配第8、第5和第2个LI*/ li:nth-child(-1n+8){}/*或(-n+8),匹配前8个LI*/ 用法五种:奇偶匹配:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
8. X:nth-Last-Child(N)
li:nth-last-child(2) {color: red;}
如果列表项非常多,但只是需要选择倒数第三个。和上面的用法不一样,nth-last-child是从后面倒着数。
9. X:nth-of-type(an+b)
用法和第7条的X:nth-Child(an+b)相同,不同点:
<ul class="demo"> <p>first p</p> <li>first li</li> <li>second li</li> <p>second p</p> </ul> .demo li:nth-child(2):选择demo下面的第二个子元素,如果该元素不是li标签则选择失败,所以选择了first li标签 .demo li:nth-of-type(2):选择demo下面的第二个li元素,所以选择了second li标签 不指定标签: .demo :nth-child(2):选择了第二个元素first li元素 .demo :nth-of-type(2):选择了demo下面的p标签的第二个second p元素和li标签的第二个second li元素,选择了所有类型标签的第二个。
10. X:nth-Last-Of-Type(N)
ul:nth-last-of-type(3) {border: 1px solid black;}
选择倒数第几个元素。
11. X:first-Child
ul li:first-child {border-top: none;}
这个伪类选择父级元素的第一个子对象。经常用于移除列表的第一个元素的边框。
12. X:last-Child
ul li:last-child {color: green;}
这个伪类选择父级元素的最后一个对象。经常用于移除列表的最后一个元素的边框。
13. X:only-Child
div p:only-child {olor: red;}
只有第一层中的第一个p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。
14. X:only-Of-Type
li:only-of-type {font-weight: bold;}
这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。
15. X:first-Of-Type
first-of-type允许我们选择同级元素的第一个。
- 本文固定链接: https://www.qingheluo.com/changjiancssweilei/
- 转载请注明: qingheluo 于 清河洛 发表