当前位置：主页 > 查看内容

一篇文章带你了解CSS Pseudo-classes(伪类 )

发布时间：2021-07-24 00:00| 有 位朋友查看

简介：CSS伪类选择器根据其他条件匹配组件，而不一定由文档树定义。CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 一、什么是伪类? CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选……

CSS伪类选择器根据其他条件匹配组件，而不一定由文档树定义。CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

一、什么是伪类?

CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。

例如，针对第一个或最后一个子元素。

伪类以冒号(:)开头。

语法

  1. /*选择器：伪类{ 属性：值 ; }*/ 

二、最常用的伪类

锚伪类

使用 锚 伪类链接可以以不同的方式显示。

这些伪类使可以对未访问的链接进行样式化，而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。

例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>锚伪类的示例</title> 
  6. <style> 
  7. a:link { 
  8. color: blue 
  9. } 
  10.  
  11. a:visited { 
  12. text-decoration: none; 
  13. } 
  14. </style> 
  15. </head> 
  16. <body style="background-color: aqua;"> 
  17. <p>Visit  
  18.      <a href="https://www.baidu.com" target="_blank">www.baidu.com</a></p> 
  19. </body> 
  20. </html> 

一些锚点伪类是动态的，是由于用户与文档进行交互(例如悬停或聚焦等)而应用的。

例

  1. <style> 
  2. a:hover { 
  3. color: red; 
  4. } 
  5.  
  6. a:active { 
  7. color: gray; 
  8. } 
  9.  
  10. a:focus { 
  11. color: yellow; 
  12. } 
  13. </style> 

这些伪类更改了响应用户操作呈现链接的方式。

  •  hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色用。
  •  active 当元素被激活或单击时适用。
  •  focus 当元素具有键盘焦点时适用。

注：为了使这些伪类很好地工作，必须按正确的顺序将它们定义 - :link, :visited, :hover, :active, :focuss。

<1> : first-child伪类

first-child伪类匹配的是一些其他元素的第一个子元素的元素。ol li:first-child在下面的示例中，选择器选择一个有序列表的第一个列表项，并从其顶部删除边框。

  1. <style> 
  2. ol { 
  3. padding: 0; 
  4. list-style: none; 
  5. } 
  6.  
  7. ol li { 
  8. padding: 10px 0; 
  9. border-top: 1px solid #000000; 
  10. } 
  11.  
  12. li:first-child { 
  13. border-top: none; 
  14. } 
  15. </style> 

注意：

要 :first-child在Internet Explorer 8和更早版本中工作，必须在文档顶部声明a 。

<2> : last-seudo伪类

last-child伪类匹配的是一些其他元素的最后一个子元素的元素。ul li:last-child例中的选择器从无序列表中选择最后一个列表项，并从其中删除右边框。

  1. <style> 
  2.    ul{ 
  3.        padding: 0; 
  4.        list-style: none;           
  5.   } 
  6.    ul li{ 
  7.        display: inline; 
  8.        padding: 0 20px; 
  9.        border-right: 1px solid #000000; 
  10.   } 
  11.    li:last-child { 
  12.        border-right: none; 
  13.   } 
  14. </style> 

注意：

CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。

<3> : nth-child伪类

CSS3引入了一个新的:nth-child伪类，使可以将给定父元素的一个或多个特定子对象作为目标。

此选择的基本语法可以与给予:nth-child(N)，其中N是一个参数，其可以是一个数字，一个关键字(even或odd)，或形式的表达xn+y，其中x和y是整数(例如1n，2n，2n+1，...)。

例

  1. <style> 
  2. table { 
  3. margin: 30px; 
  4. border-collapse: collapse; 
  5. } 
  6.  
  7. table tr { 
  8. border-bottom: 1px solid #666; 
  9. } 
  10.  
  11. table tr th, 
  12. table tr td { 
  13. padding: 10px; 
  14. } 
  15.  
  16. table tr:nth-child(2n) td { 
  17. background: #f2f2f2; 
  18. } 
  19. </style> 
  20. /*上面示例中的样式规则仅突出显示了代替表行，而没有向元素添加任何ID或类。*/ 

提示：

CSS :nth-child(N)选择器在必须选择以特定间隔或模式(例如在偶数或奇数位置等)出现在文档树内的元素的情况下非常有用。

<4> : lang伪类

语言伪类:lang允许根据特定标记的语言设置来构造选择器。

lang以下示例中的伪类为明确赋予语言值的元素定义了引号no。

例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>CSS：lang伪类示例</title> 
  6. <style> 
  7. q:lang(no) { 
  8. quotes: "~""~"; 
  9. } 
  10. </style> 
  11. </head> 
  12. <body style="background-color: aqua;"> 
  13. <p>某些文本<q lang=“ no”>段落中的引号</ q>一些文本。</ p> 
  14. <p><strong>Note:</strong>Internet Explorer 8和更早版本不支持 
  15. <code>：lang </ code>伪类。IE8仅在以下情况下支持 <code> 
  16.     </code> is specified.</p> 
  17. </body> 
  18. </html> 
  19. <!-- code snippet */Some text A quote in a paragraph Some text ></--HTML> 

注：

Internet Explorer 7更早版本不支持:lang伪类。IE8仅在指定a的情况下支持。

三、伪类和CSS类

伪类可以与CSS类结合使用。

在下面的示例中class="red"，带有的链接将显示为红色。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>使用带有选择器的CSS伪类示例</title> 
  6. <style> 
  7. a.red:link { 
  8. color: #ff0000; 
  9. } 
  10. </style> 
  11. </head> 
  12. <body style="background-color: aqua;"> 
  13. <p> 
  14. <a href="#">Click me</a> 
  15. <br> 
  16. <a href="#" class="red">Click me</a> 
  17. </p> 
  18. </body> 
  19. </html> 

 

四、总结

本文基于CSS基础，介绍了CSS中的伪类，从什么是伪类，常见的伪类的用法( first-child，: last-seudo，: nth-child，: lang)最后介绍了伪类可以与CSS类结合使用。通过项目的分析，代码的展示 ，能够让读者直观的理解伪类的含义。

希望能够帮助读者更好的学习。

 
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/J-0obqRn7MqZrlfzMG4r6g
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：我的技术之悟 ——《我的Java打怪日记》 下一篇：聊聊JVM基础，快进来复习复习吧

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐