RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
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.

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.

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

结论

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


本文标题：16个非常有用的CSS伪选择器，你千万不要错过了！
文章出自：http://jxjierui.cn/article/dpsdssh.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区浩晨众云设计工作室（个体工商户）
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.jxjierui.cn

公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

网站备案号：蜀ICP备2025119795号-2

内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站