这些CSS伪类，你可能还不知道，可以用起来了！

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，它又会失去这个样式。

我们提供的服务有：成都网站建设、网站建设、微信公众号开发、网站优化、网站认证、江都ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的江都网站制作公司

这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方法，另一种方法是实现最佳实践并尽可能多地重用代码。

接下介绍一些大家可能还不熟悉的一些伪类及其用例，希望对大家日后有所帮助。

::first-line | 选择文本的第一行

::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。

用法如下：

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

::first-letter | 选择这一行的第一字

CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. 前端小智，不断努，终身学习者！
     
    4.

::selection| 被用户高亮的部分

::selection 伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

 
 
 
 
    
  
  
  
  
  1. div::selection { 
    2. 
  
  
  
  
  2.       color: #409EFF; 
    3. 
  
  
  
  
  3. } 
    4.

:root | 根元素

:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。

在声明全局 CSS 变量时 :root 会很有用：

 
 
 
 
    
  
  
  
  
  1. :root { 
    2. 
  
  
  
  
  2.   --main-color: hotpink; 
    3. 
  
  
  
  
  3.   --pane-padding: 5px 42px; 
    4. 
  
  
  
  
  4. } 
    5.

:empty | 仅当子项为空时才有作用

:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),注释或处理指令都不会产生影响。

 
 
 
 
    
  
  
  
  
  1. div:empty { 
    2. 
  
  
  
  
  2.   border: 2px solid orange; 
    3. 
  
  
  
  
  3.   margin-bottom: 10px; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.  
    9.
 

只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。

:only-child | 只有一个子元素才有作用

:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。

 
 
 
 
    
  
  
  
  
  1. p:only-child{ 
    2. 
  
  
  
  
  2.   background: #409EFF; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.   
    第一个没有任何兄弟元素的元素
     
    7.
 
  •  
  •   

    第二个

     
  •   

    第二个

     
  •  

    第一个没有任何兄弟元素的元素

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

    :first-of-type表示一组兄弟元素中其类型的第一个元素。

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

    上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。

     
 
 
 
      
  
  
  
  
    1.  
      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. 
  
  
  
  
    10.  
      11.

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

    :last-of-type CSS 伪类 表示了在(它父元素的)子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

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

    上面表示将 .innerDiv 内的的最后一个元素为 p 的颜色设置为橘色。

    nth-of-type() | 选择指定类型的子元素

    :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

     
 
 
 
      
  
  
  
  
    1. .innerDiv p:nth-of-type(1) { 
      2. 
  
  
  
  
    2.     color: orangered; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.   
      Div1
       
      7. 
  
  
  
  
    7.   
      These are the necessary steps
       
      8. 
  
  
  
  
    8.   
      hiya
       
      9. 
  
  
  
  
    9.    
      10. 
  
  
  
  
    10.   
       
      11. 
  
  
  
  
    11.       Do not push the brake at the same time as the accelerator. 
      12. 
  
  
  
  
    12.   
       
      13. 
  
  
  
  
    13.   
      Div2
       
      14. 
  
  
  
  
    14.  
      15.

    :nth-last-of-type() | 在列表末尾选择类型的子元素

    :nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。

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

    这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。

     
 
 
 
      
  
  
  
  
    1.  
      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.  
      10.

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

    :link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接(例如:hover选择器，:active选择器，:visited选择器)。

    为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。

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

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

    :checked CSS 伪类选择器表示任何处于选中状态的「radio」(), 「checkbox」 () 或("select") 元素中的「option」 HTML元素("option")。

      
  
 
 
      
   
   
  
  
    1. input:checked { 
      2. 
   
   
  
  
    2.   box-shadow: 0 0 0 3px hotpink; 
      3. 
   
   
  
  
    3. } 
      4. 
   
   
  
  
    4.  
      5. 
   
   
  
  
    5.  
      6.

    :valid | 选择一个有效的元素

    :valid CSS 伪类表示内容验证正确的 或其他

    元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。

      
 
 
 
      
   
  
  
  
    1. input:valid { 
      2. 
   
  
  
  
    2.   box-shadow: 0 0 0 3px hotpink; 
      3. 
   
  
  
  
    3. } 
      4.

    :invalid | 选择一个无效的元素

    :invalid CSS 伪类 表示任意内容未通过验证的 或其他 元素。

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

    :lang() | 通过指定的lang值选择一个元素

    :lang() CSS 伪类基于元素语言来匹配页面元素。

      
 
 
 
      
   
  
  
  
    1. /* 选取任意的英文（en)段落 */ 
      2. 
   
  
  
  
    2. p:lang(en) { 
      3. 
   
  
  
  
    3.   quotes: '\201C' '\201D' '\2018' '\2019'; 
      4. 
   
  
  
  
    4. } 
      5.

    :not() | 用来匹配不符合一组选择器的元素

    CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类(negation pseudo-class)。

    来看一个例子：

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

    Div 1 和 Div 2会被选中，p 不会被选 中。

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    文章名称：这些CSS伪类，你可能还不知道，可以用起来了！
    文章网址：http://www.mswzjz.com/qtweb/news18/164068.html

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

    广告

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

    猜你还喜欢下面的内容

    网站收录知识

    分类信息网站

    APP定制开发　　 　成都西信机房托管　　 　免备案空间腾讯云　　 　四川白乌鱼　　 　成都响应式网站建设　　 　高端网站建设　　 　营山网站建设　　 　成都机柜租用　　 　成都SEO优化公司　　 　做网站　　 　成都服务器机柜租用　　 　租用服务器　　 　成都网站设计公司　　 　400电话申请　　 　网站服务器租用　　 　成都做网站　　 　雅安服务器托管　　 　网站制作公司　　 　seo优化排名　　 　资阳服务器托管