css选择器

1. 通配符选择器（Universal Selector）

通配符选择器使用星号（*）表示，可以匹配页面上的所有元素。

场景：当需要为页面上所有元素设置统一的样式时

CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 类选择器（Class Selector）

类选择器使用点（.）开头，后面跟上类名，可以为拥有相同类的元素设置样式。

场景：为具有相同样式的多个元素设置样式。

HTML代码

<div class="highlight">这是一段高亮文本。</div>

CSS代码：

.highlight {
  background-color: yellow;
}

4. ID选择器（ID Selector）

ID选择器使用井号（#）开头，后面跟上ID名，用于选择具有特定ID的元素。

场景：为页面上唯一的元素设置样式。

HTML代码：

<div id="unique">这是唯一的元素。</div>

CSS代码：

#unique {
  border: 1px solid red;
}

6. 并集选择器（Grouping Selector）

并集选择器使用逗号分隔多个选择器，为多个元素设置相同的样式。

场景：为多个不同类型的元素设置相同的样式。

CSS代码：

h1, h2, h3 {
  color: blue;
}

7. 后代选择器（Child Selector）

后代选择器使用大于号（>）表示，选择某个元素的直接子元素。

场景：选择特定父元素的直接子元素。

CSS代码：

#parent > p {
  font-weight: bold;
}

8. 子代选择器（Sub-selector）

子代选择器使用空格分隔，选择某个元素的所有子元素，不论层级。

场景：选择特定父元素的所有子元素。

CSS代码：

#parent p {
  margin-left: 20px;
}

9. 兄弟选择器（Adjacent Sibling Selector）

兄弟选择器使用加号（+）表示，选择紧接在另一个元素后的同级元素。

场景：选择紧跟在特定元素后的同级元素。

CSS代码：

h2 + p {
  margin-top: 0;
}

10. 属性选择器（Attribute Selector）

属性选择器用于选择具有特定属性或属性值的元素。

场景：根据元素的属性或属性值设置样式。

CSS代码：

a[target="_blank"] {
  color: green;
}

11. 伪类选择器（Pseudo-class Selector）

伪类选择器用于选择处于特定状态的元素。

场景：为元素的特定状态设置样式。

CSS代码：

a:hover {
  color: red;
}

案例

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS选择器示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="unique" class="highlight">
    <h1>标题一</h1>
    <p>这是一段文本。</p>
    <div>
      <p class="highlight">这是另一段文本。</p>
    </div>
    <ul>
      <li>列表项一</li>
      <li class="highlight">列表项二</li>
      <li>列表项三</li>
    </ul>
  </div>
</body>
</html>

CSS代码（styles.css）：

/* 通配符选择器 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 元素选择器 */
body {
  font-family: Arial, sans-serif;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
}

/* ID选择器 */
#unique {
  border: 1px solid red;
  padding: 20px;
}

/* 交集选择器 */
#unique h1 {
  color: blue;
}

/* 并集选择器 */
h1, h2 {
  font-size: 24px;
}

/* 后代选择器 */
#unique > p {
  margin-bottom: 10px;
}

/* 子代选择器 */
#unique p {
  color: #333;
}

/* 兄弟选择器 */
h1 + p {
  font-style: italic;
}

/* 属性选择器 */
a[target="_blank"] {
  text-decoration: underline;
}

/* 伪类选择器 */
a:hover {
  color: red;
}
选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有

元素

 1
element,element div,p 选择所有
元素和

元素

 1
element.class p.hometown 选择所有 class="hometown" 的

元素

 1
element element div p 选择
元素内的所有

元素

 1
element>element div>p 选择所有父级是
元素的

元素

 2
element+element div+p 选择所有紧跟在
元素之后的第一个

元素

 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个

元素的第一个字母

 1
:first-line p:first-line 选择每一个

元素的第一行

 1
:first-child p:first-child 指定只有当

元素是其父级的第一个子级的样式。

 2
:before p:before 在每个

元素之前插入内容

 2
:after p:after 在每个

元素之后插入内容

 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有

元素

 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute**=value*] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
:has :has 允许根据其后代元素来选择一个元素。 3
:is :is 接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。 3
posted @   蜡笔小新Belief  阅读(76)  评论(0)  编辑  收藏  举报
相关博文：
· CSS3新特性
· html块级元素
· CSS 3 所有的选择器整理（2023.2）
· CSS 选择器 | 菜鸟教程
· CSS - 选择器 标签选择器，id选择器，类选择器，后代选择器，子代选择器，兄弟选择器，通用选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae