CSS选择器详解与应用实例

最新推荐文章于 2025-06-11 09:03:53 发布

原创最新推荐文章于 2025-06-11 09:03:53 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

29 篇文章

订阅专栏

CSS（Cascading Style Sheets）是用于控制网页样式的语言。在CSS中，选择器（Selector）用于选择页面上的HTML元素，以便应用样式规则。以下是对CSS中常见选择器的详细介绍，以及相应的HTML和CSS代码示例。

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

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

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

CSS代码：

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

2. 元素选择器（Type Selector）

元素选择器直接使用HTML元素的名称，只选择该类型的所有元素。

场景：为特定类型的元素设置样式。

CSS代码：

p {
  color: #333;
}

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;
}

5. 交集选择器（Descendant Selector）

交集选择器允许你选择作为某个元素后代的所有元素。

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

CSS代码：

#parent .child {
  font-size: 14px;
}

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页面。

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;
}