16个非常有用的CSS伪选择器，你千万不要错过了！

这篇文章鼓励构造 UI 时使用更多纯 CSS 和更少的 JS。熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。

1、::first-line | 选择首行文本

这个伪元素选择器选择换行之前文本的首行。

 
 
 
    
  
  
  
  1. p:first-line {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3. }
    4.

2、::first-letter | 选择首字母

这个伪元素选择器应用于元素中文本的首字母。

 
 
 
    
  
  
  
  1. .innerDiv p:first-letter {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3.     font-size: 40px
    4. 
  
  
  
  4. }
    5.

3、::selection | 选择高亮（被选中）的区域

应用于任何被用户选中的高亮区域。通过 ::selection 伪元素选择器，我们可以将样式应用于高亮区域。

 
 
 
    
  
  
  
  1. div::selection {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4.

4、:root | 根元素

:root 伪类选中文档的根元素。在 HTML 中，为 HTML 元素。在 RSS 中，则为 RSS 元素.这个伪类选择器应用于根元素，多用于存储全局 CSS 自定义属性。

5、:empty | 仅当元素为空时触发

这个伪类选择器将选中没有任何子项的元素。该元素必须为空。如果一个元素没有空格、可见的内容、后代元素，则为空元素。

 
 
 
    
  
  
  
  1. div:empty {
    2. 
  
  
  
  2.     border: 2px solid orange;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
    7. 
  
  
  
    8.

这个规则将应用于空的 div 元素。这个规则将应用于第一个和第二个 div ，因为他们是真为空，而第三个 div 包含空格。

6、:only-child | 选择仅有的子元素

匹配父元素中没有任何兄弟元素的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:only-child {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

7、:first-of-type | 选择第一个指定类型的子元素

 
 
 
    
  
  
  
  1. .innerDiv p:first-of-type {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

这将应用于 .innerDiv 下的第一个 p 元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    Div1
    3. 
  
  
  
  3.     
    These are the necessary steps
    4. 
  
  
  
  4.     
    hiya
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.     
    7. 
  
  
  
  7.         Do not push the brake at the same time as the accelerator.
    8. 
  
  
  
  8.     
    9. 
  
  
  
  9.     
    Div2
    10.

这个 p （“These are the necessary step”）将被选中。

8、:last-of-type | 选择最后一个指定类型的子元素

像 :first-of-type 一样，但是会应用于最后一个同类型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:last-of-type {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

这将应用于 innerDiv 下的最后一个 p 段落元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    These are the necessary steps
    3. 
  
  
  
  3.     
    hiya
    4. 
  
  
  
  4.     
    Div1
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.         Do the same.
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.     
    Div2
    9.

因此，这个 p 元素（“Do the same”）将被选中。

9、:nth-of-type() | 选择特定类型的子元素

这个选择器将从指定的父元素的孩子列表中选择某种类型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:nth-of-type(1) {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

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

这将选择最后一个指定类型的子元素。

 
 
 
    
  
  
  
  1. .innerDiv p:nth-last-of-type() {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4.

这将选择 innerDiv 列表元素中包含的最后一个段落类型子元素。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     
    These are the necessary steps
    3. 
  
  
  
  3.     
    hiya
    4. 
  
  
  
  4.     
    Div1
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.         Do the same.
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.     
    Div2
    9. 
  
  
  
  9.

innerDiv 中最后一个段落子元素 p （“Do the same”）将会被选中。

11、:link | 选择一个未访问过的超链接

这个选择器应用于未被访问过的链接。常用于带有 href 属性的 a 锚元素。

 
 
 
    
  
  
  
  1. a:link {
    2. 
  
  
  
  2.     color: orangered;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
  5. Login
    6.

这将选中未被点击过带有 href 的指定界面的 a 锚点元素，选中的元素中的文字将会显示为橙色。

12、:checked | 选择一个选中的复选框

这个应用于已经被选中的复选框。

 
 
 
    
  
  
  
  1. input:checked {
    2. 
  
  
  
  2.     border: 2px solid lightcoral;
    3. 
  
  
  
  3. }
    4.

这个规则应用到所有被选中的复选框。

13、:valid | 选择一个通过验证的元素

这主要用于可视化表单元素，以让用户判断是否验证通过。验证通过时，默认元素带有 valid属性。

 
 
 
    
  
  
  
  1. input:valid {
    2. 
  
  
  
  2.     boder-color: lightsalmon;
    3. 
  
  
  
  3. }
    4.

14、:invalid | 选择一个未通过验证的元素

像 :valid 一样，但是会应用到未通过验证的元素。

 
 
 
    
  
  
  
  1. input[type="text"]:invalid {
    2. 
  
  
  
  2.     border-color: red;
    3. 
  
  
  
  3. }
    4.

15、:lang() | 选择指定语言的元素

应用于指定了语言的元素。可以通过以下两种方式使用：

 
 
 
    
  
  
  
  1. p:lang(fr) {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4.

或者

 
 
 
    
  
  
  
  1. p[lang|="fr"] {
    2. 
  
  
  
  2.     background: yellow;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
  5. Paragraph 1
    6.

16、:not() | 对于选择取反（这是一个运算符）

否定伪类选择器选中相反的。让我们看一个示例：

 
 
 
    
  
  
  
  1. .innerDiv :not(p) {
    2. 
  
  
  
  2.     color: lightcoral;
    3. 
  
  
  
  3. }
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
  6.     
    Paragraph 1
    7. 
  
  
  
  7.     
    Paragraph 2
    8. 
  
  
  
  8.     
    Div 1
    9. 
  
  
  
  9.     
    Paragraph 3
    10. 
  
  
  
  10.     
    Div 2
    11. 
  
  
  
  11.

Div 1 和 Div 2 会被选中，因为他们不是 p 元素。

结论

就这些了。这是全部内容。还有更多的伪选择器，但是为非标准的，因此我省略了它们。感谢阅读

新闻标题：16个非常有用的CSS伪选择器，你千万不要错过了！
文章源于：http://www.csdahua.cn/qtweb/news9/317559.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

企业网站制作知识

同城分类信息

叙永网站建设　　 　攀枝花网站建设　　 　雅安做网站　　 　企业微信定制　　 　Google外贸推广　　 　400电话办理　　 　绵阳电信机房　　 　成都网站制作　　 　网站解决方案　　 　成都发电机维修　　 　成都广告公司　　 　简阳威斯达宇　　 　www.tpbzx.cn　　 　成都400电话办理　　 　成都网站制作　　 　轻质隔墙板　　 　清舞人间　　 　四川航空文化　　 　成都门户网站建设设计方案　　 　高端网站设计推广