学习笔记---CSS伪选择器

1、::first-line // 首行文字 
   p::first-line { background: #f00; } // 首行背景色是红色

2、::first-letter // 选择首字母
   span:first-letter { color: #f00; } // 首字母是红色

3、::selection // 被选中区域
   p { color: #f00; } // 被选中的内容颜色是红色

4、:root // 文档的根元素
:root { height: 100px; } // 在html中，html的高度是100px

5、:empty // 仅当元素为空时触发（没有空格、可见的内容、后代元素）
   div:empty {    border: 2px solid orange;}

6、:only-child // 选择仅有的子元素
div p:only-child { color: #f00; } // div下仅有

7、:first-of-type // 选择第一个指定类型的子元素
div p:first-of-type { color: #f00; } // 第一个子p元素字体是红色

8、:last-of-type // 选择最后一个指定类型的子元素
div :last-of-type { color: #f00; } // 最后一个子p元素字体是红色

9、:nth-of-type() // 选择特定类型的子元素
10、:nth-last-of-type() // 选择列表末尾中指定类型的子元素

11、:link | 选择一个未访问过的超链接
a:link { color: #f00; } // 未访问过的链接字体是红色

12、:checked | 选择一个选中的复选框
input:checked { border: 2px solid lightcoral; } // 选中后改变边框

13、:valid // 选择一个通过验证的元素
input:valid { boder-color: lightsalmon; } // 输入框校验通过的样式

14、:invalid // 选择一个未通过验证的元素
input[type="text"]:invalid { border-color: red; } // 校验不通过的样式

15、:lang() // 选择指定语言的元素
p:lang(fr) { background: yellow; }
p[lang|="fr"] { background: yellow; } // 语言为‘fr’的样式

16、:not() // 对于选择取反（这是一个运算符）
div :not(p) { color: lightcoral; } // 非p元素的内容的样式