Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1209775
  • 博文数量: 1096
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 11060
  • 用 户 组: 普通用户
  • 注册时间: 2018-03-07 15:17
个人简介

linux工程师,RHCE

文章分类

全部博文(1096)

文章存档

2023年(84)

2022年(314)

2021年(251)

2020年(244)

2019年(176)

2018年(27)

我的朋友

分类: 系统运维

2020-09-01 19:44:01

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

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

作者:niayyy来源:|2020-09-01 15:10

 

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

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

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

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

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

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

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

3、::selection | 选择高亮(被选中)的区域

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

	
  1. div::selection { 
  2.     background: yellow; 

4、:root | 根元素

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

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

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

	
  1. div:empty { 
  2.     border: 2px solid orange; 
  3.  
  4.  
  5.  
  6.  
 

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

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

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

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

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

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

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

	
  1. class="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
     
 

这个 p (“These are the necessary step”)将被选中。

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

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

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

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

	
  1. class="innerDiv"
  2.     

    These are the necessary steps

     
  3.     

    hiya

     
  4.     
    Div1
     
  5.     

     

  6.         Do the same. 
  7.     

     
  8.     
    Div2
     
 

因此,这个 p 元素(“Do the same”)将被选中。

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

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

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

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

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

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

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

	
  1. class="innerDiv"
  2.     

    These are the necessary steps

     
  3.     

    hiya

     
  4.     
    Div1
     
  5.     

     

  6.         Do the same. 
  7.     

     
  8.     
    Div2
     
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

或者

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

     

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

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

	
  1. .innerDiv :not(p) { 
  2.     color: lightcoral; 
  3.  
  4. class="innerDiv"
  5.     

    Paragraph 1

     
  6.     

    Paragraph 2

     
  7.     
    Div 1
     
  8.     

    Paragraph 3

     
  9.     
    Div 2
     
 

Div 1 和 Div 2 会被选中,因为他们不是 p 元素。《linux就该这么学》不错的linux自学书籍

阅读(680) | 评论(0) | 转发(0) |
0

上一篇:VMware终止vSphere 6标准支持;你该怎么做

下一篇:谷歌超强Android UI工具包霸榜Github,这份上手指南了解一下

给主人留下些什么吧!~~