本文共 1335 字，大约阅读时间需要 4 分钟。

CSS 选择器全面指南

一、基本选择器

1. 子元素选择器（直接后代）

子元素选择器用于选择父元素的直接子元素，仅限一代的所有元素。

   
  
    
这是一个段落元素
   

选择器div > p会匹配<p>元素，而不会匹配<div>中的其他子元素。

2. 相邻兄弟选择器

相邻兄弟选择器用于选择同一父级的相邻兄弟元素。

• div+a：选择与div相邻的第一个a元素。
• div~a：选择与div相邻的所有a元素。

例如：

   
  
    
     没有被选取到
    
  
    
     被选取的div元素
    
   

选择器div~div会匹配第二个<div>元素。

3. 通用兄弟选择器

通用兄弟选择器用于选择父元素的所有后续兄弟元素。

• div~section：选择所有与div同级的section元素。

例如：

   
  
    
     没有被选取到
    
  
    
     被选取的div元素
    
  
    
   

选择器div~section会匹配第三个元素<section>。

二、属性选择器

1. 属性选择器

属性选择器用于根据元素的属性来选择元素。

• [属性=“value”]：选择具有指定属性的元素，若属性值未指定则匹配所有具有该属性的元素。
• [属性^=“value”]：选择属性值以指定字符串开头的元素。

例如：

访问链接

选择器a[href="#"]会匹配所有带有href属性的<a>元素。

2. UI 元素状态伪类

UI元素状态伪类用于根据元素的可见性和状态来选择元素。

• :enabled：匹配可输入的input元素。
• :disabled：匹配不可输入的input元素。
• :checked：匹配已选中的input元素（适用于单选按钮和复选框）。

三、伪类选择器

1. 动态伪类

动态伪类用于根据用户交互选择元素。

• :link：未访问的链接。
• :hover：鼠标悬停在元素上。
• :active：鼠标按下时的链接状态。
• :visited：已访问的链接。
• :focus：获取到表单焦点的元素。

2. UI 元素状态伪类

用于匹配特定状态的UI元素。

• :enabled：可输入的input元素。
• :disabled：不可输入的input元素。

四、结构类选择器

1. 子元素位置选择器

• :first-child：匹配父元素的第一个子元素。
• :last-child：匹配父元素的最后一个子元素。
• :nth-child(n)：匹配父元素的第n个子元素（n为数字或表达式）。
• :nth-last-child(n)：匹配父元素的倒数第n个子元素。
• :empty：匹配内容为空的元素。

2. 否定选择器

• not(选择器)：匹配不符合指定选择器的元素。

五、伪元素

1. 伪元素选择器

• ::first-line：块级元素的第一行文本。
• ::first-letter：块级元素的第一个字母。
• ::before：在元素内容前插入新内容。
• ::after：在元素内容后插入新内容。
• ::selection：设置选中文本的样式。

2. 示例

.para::first-line {  color: red;}

在浏览器中，段落内容的第一行会变为红色。

转载地址：http://qnca.baihongyu.com/