当前位置：首页 > news >正文

有哪些 CSS 选择器？请分别介绍

news 2026/5/12 5:45:14

CSS 选择器（CSS Selectors）是用于选择 HTML 元素并应用样式的模式。它们是 CSS 的核心，决定了哪些元素会受到样式规则的影响。

以下是 CSS 选择器的详细分类和介绍：

这些是最常用、最基础的选择器。

通配符选择器 (Universal Selector)
- 符号:*
- 作用: 选择文档中的所有元素。
- 示例:* { margin: 0; padding: 0; }(常用于重置默认边距)
类型选择器 / 标签选择器 (Type/Tag Selector)
- 符号: 标签名 (如div,p,h1)
- 作用: 选择所有指定标签名的元素。
- 示例:p { color: blue; }(选择所有<p>标签)
类选择器 (Class Selector)
- 符号:.(点号) + 类名
- 作用: 选择所有class属性包含指定值的元素。一个元素可以有多个类。
- 示例:.btn { background: red; }(选择<div class="btn">或<button class="btn primary">)
ID 选择器 (ID Selector)
- 符号:#(井号) + ID 名
- 作用: 选择id属性匹配的元素。ID 在页面中应该是唯一的。
- 示例:#header { height: 100px; }(选择<div id="header">)
属性选择器 (Attribute Selector)
- 符号:[attr],[attr=value],[attr~=value],[attr|=value],[attr^=value],[attr$=value],[attr*=value]
- 作用: 根据元素存在的属性或属性的值进行选择。
- 示例:
  - [target]: 选择所有带有target属性的元素。
  - [type="text"]: 选择type为 “text” 的输入框。
  - a[href^="https"]: 选择所有href以 “https” 开头的链接。
  - img[src$=".png"]: 选择所有src以 “.png” 结尾的图片。

用于根据元素之间的层级关系进行选择。

后代选择器 (Descendant Combinator)
- 符号: 空格
- 作用: 选择指定元素内部的所有后代元素（无论嵌套多深）。
- 示例:div p { color: red; }(选择所有在<div>内部的<p>标签，包括<div><div><p>)
子选择器 (Child Combinator)
- 符号:>
- 作用: 选择指定元素的直接子元素（仅一层）。
- 示例:div > p { color: red; }(选择所有直接位于<div>下的<p>标签，不包括嵌套更深的<p>)
相邻兄弟选择器 (Adjacent Sibling Combinator)
- 符号:+
- 作用: 选择紧接在指定元素之后的第一个同级元素。
- 示例:h1 + p { margin-top: 0; }(选择紧跟在<h1>后面的第一个<p>)
通用兄弟选择器 (General Sibling Combinator)
- 符号:~
- 作用: 选择指定元素之后的所有同级元素。
- 示例:h1 ~ p { color: gray; }(选择<h1>之后所有的<p>兄弟元素)

用于选择处于特定状态的元素，或者基于文档结构中的位置进行选择。

用户交互伪类:
- :hover: 鼠标悬停时。
- :active: 元素被激活（如鼠标点击瞬间）时。
- :focus: 元素获得焦点（如输入框被选中）时。
- :visited: 链接已被访问过。
- :disabled/:enabled: 表单元素被禁用或启用。
结构伪类:
- :first-child: 选择作为其父元素第一个子元素的元素。
- :last-child: 选择作为其父元素最后一个子元素的元素。
- :nth-child(n): 选择父元素的第n个子元素（支持2n,odd,even）。
- :nth-of-type(n): 选择父元素中指定类型的第n个子元素。
- :only-child: 选择父元素的唯一子元素。
- :first-of-type/:last-of-type: 选择指定类型的第一个或最后一个子元素。
其他伪类:
- :not(selector): 选择不匹配指定选择器的元素（否定选择器）。
- :empty: 选择没有子元素（包括文本节点）的元素。
- :target: 选择当前活动的 URL 锚点目标元素。
- :checked: 选择被选中的单选框或复选框。

用于选择元素的特定部分，并为其应用样式，而不是整个元素。

选择器列表 (Selector List)
- 符号:,(逗号)
- 作用: 将多个选择器组合在一起，对它们应用相同的样式。
- 示例:h1, h2, h3 { font-weight: bold; }
层级选择器 (CSS 4 新增，部分浏览器支持)
- :has(selector): 父选择器。如果元素包含匹配selector的后代，则选中该元素。
- 示例:div:has(> p)(选择包含直接子元素<p>的<div>)