CSS所有选择器教程

一、CSS所有选择器的作用

---

1. 基础选择器

• 元素选择器（标签选择器）: 选择所有指定元素。
  • 描述：根据HTML元素的名称来选择元素。例如，p选择器会选择所有的<p>元素。
  • 示例：p { color: red; } 会将所有<p>元素的文字颜色设置为红色。
• 类选择器（.开头）: 选择所有具有指定类的元素。
  • 描述：通过类名找到对应的元素。例如，通过HTML元素的class属性来选择元素，类选择器以点号.开头，后跟类名。类名以.开头，如.my-class。
• ID选择器（#开头）: 选择具有指定ID的元素。
  • 描述：通过ID名找到对应的元素，ID选择器以井号#开头，后跟ID名，且每个ID在页面中应该是唯一的，如#my-id。

2. 组合选择器

• 后代选择器（空格分隔）: 选择指定元素内部的所有符合条件的后代元素。
  • 描述：通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。
  • 示例：div p会选择所有<div>元素内的<p>元素。
• 子元素选择器（>分隔）: 选择指定元素的直接子元素。
  • 描述：使用>符号分隔选择器，通过>符号选择直接子元素。
  • 示例： div > p会选择所有直接位于<div>元素内的<p>元素。
• 相邻兄弟选择器（+分隔）: 选择与指定元素在同一层级且紧接在它后面的元素。
  • 描述：使用+符号分隔选择器，选择紧接在另一元素后的元素，且二者有相同的父元素。
  • 示例：h2 + p会选择紧跟在<h2>元素之后的<p>元素。
• 通用兄弟选择器（~分隔）: 选择与指定元素在同一层级的所有后续兄弟元素。
  • 描述：使用~符号分隔选择器，选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。
  • 示例：h2 ~ p会选择所有与h2元素在同一层级的p元素。
• 群组选择器（，分隔）：允许您同时选择多个元素，并将相同的样式应用于它们。
  • 描述：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号,分隔不同的选择器。
  • 示例：h1, h2, p { color: blue; } 会将<h1>、<h2>和<p>元素的文字颜色都设置为蓝色。

3. 属性选择器

• 等于属性选择器([attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。
  • 描述：根据元素的属性及属性值来选择元素。
  • 示例：a[target="_blank"]这个选择器会选择所有<a>标签，其target属性值完全等于"_blank"。
• 包含属性选择器([attribute~="value"]): 选择属性值包含指定完整子串的元素。
  • 描述：实际上[attribute~="value"]选择器用于选择属性值中包含一个完整单词value（单词之间由空格分隔）的元素。
  • 示例：a[title~="example"]这个选择器会选择所有<a>标签，其title属性值中包含单词"example"（注意，"example"必须是一个完整的单词，前后有空格分隔，除非它是属性值中的唯一单词）。
• 起始属性选择器([attribute^="value"]): 选择属性值以指定子串开头的元素。
  • 描述：选择属性值以指定子串开头的元素。
  • 示例：a[href^="https"]这个选择器会选择所有<a>标签，其href属性值以"https"开头。这通常用于确保所有安全链接（HTTPS）都有特定的样式。
• 结尾属性选择器([attribute$="value"]): 选择属性值以指定子串结尾的元素。
  • 描述：选择属性值以指定子串结尾的元素。
  • 示例：a[href$=".pdf"]这个选择器会选择所有<a>标签，其href属性值以".pdf"结尾。这可以用于给PDF文件链接添加特定的样式。
• 子串属性选择器([attribute*="value"]): 选择属性值包含指定子串的元素。
  • 描述：选择属性值中包含指定子串的元素（与[attribute~="value"]不同，这里不需要完整的单词匹配）。
  • 示例：a[href*="example"]这个选择器会选择所有<a>标签，其href属性值中包含子串"example"。这意味着无论"example"出现在href的哪个位置，只要它作为子串存在，该链接就会被选中。

4. 伪类选择器

• 动态伪类选择器：用于选择处于特定状态的元素。
  • :hover：当鼠标指针悬停在元素上时触发。
  • :active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。
  • :focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。
  • :visited：选择已访问过的链接。
  • :link：选择未访问过的链接。
• 结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。

  • :first-child：选择父元素的第一个子元素。

  • :last-child：选择父元素的最后一个子元素。

  • :nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如”even”和”odd”）或公式（如2n+1）。

  • :nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。

  • :only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。

  • :first-of-type：选择父元素下相同类型元素的第一个子元素。

  • :last-of-type：选择父元素下相同类型元素的最后一个子元素。

  • :nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。

  • :nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。

  • :only-of-type：选择父元素下与其类型相同的唯一子元素。

  • :empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。

• 表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
  • :checked：选择被选中的表单元素，如单选框、复选框等。
  • :enabled：选择启用的表单元素。
  • :disabled：选择被禁用的表单元素。
  • :read-only：选择只读的表单元素。
  • :read-write：选择可写的表单元素。
• 目标伪类选择器:
  • :target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
• 否定伪类选择器:
  • :not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。