文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-24 17:03

关注

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

这篇文章在一定程度上鼓励你在构建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.   color: lightcoral; 
  3. } 

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

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

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

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

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

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

:root | 根元素

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

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

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

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

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

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

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

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

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

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

    第二个

     
  •   

    第二个

     
  •  
    •

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

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

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

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

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

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

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

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

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

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

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

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

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

    :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.     color: orangered; 
    3. } 

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

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

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

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

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

    1. a:link { 
    2.     color: orangered; 
    3. } 
    4. "/login">Login 

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

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

    1. input:checked { 
    2.   box-shadow: 0 0 0 3px hotpink; 
    3. } 
    4.  
    5. "checkbox" /> 

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

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

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

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

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

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

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

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

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

    1.  
    2. p:lang(en) { 
    3.   quotes: '\201C' '\201D' '\2018' '\2019'; 
    4. } 

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

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

    来看一个例子：

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

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

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

     

    来源：大迁世界内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

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

    后端开发CSS伪类2024-12-24

    关于 Vue3 这些知识，你可能还不知道!

    后端开发Vue3框架2024-12-14

    SCSS 中这些技巧，你可能还不知道！

    后端开发SCSS函数2024-12-02

    ES6 中 module 备忘清单，你可能知道 module 还可以这样用！

    后端开发ES62024-12-11

    你可能不知道，前端这五个有用的技术可以这么酷！

    后端开发前端技术2024-12-03

    微信几次大更新后，你可能还不知道这8个好用小技巧

    后端开发微信小技巧2024-12-24
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯