CSS常见的选择器介绍

CSS（层叠样式表）选择器是一种模式，用于选择要应用样式的HTML元素。以下是一些常见的CSS选择器类型和实际应用样例供参考：

1、元素选择器：

直接通过HTML元素名称选择元素。例如，p选择所有<p>元素。

css 复制代码

/* 使所有段落文字变为蓝色 */
p {
  color: blue;
}

2、类选择器：

通过HTML元素的class属性选择元素。类选择器在CSS中以点.开头。例如，.my-class选择所有class="my-class"的元素。

css 复制代码

/* 设置类名为"highlight"的元素的背景颜色为黄色 */
.highlight {
  background-color: yellow;
}

3、 ID选择器：

通过HTML元素的id属性选择元素。ID选择器在CSS中以井号#开头。例如，#my-id选择id="my-id"的元素。

css 复制代码

/* 设置ID为"main-title"的元素的字体大小为24px */
#main-title {
  font-size: 24px;
}

4、属性选择器

根据元素的属性及属性值来选择元素。例如，[type="text"]选择所有type="text"的元素。

css 复制代码

/* 为所有type属性值为"submit"的<input>元素设置边框样式 */
input[type="submit"] {
  border: 2px solid black;
}

5、伪类选择器

用于定义元素的特殊状态。例如，:hover可以选择鼠标悬停在其上的元素。

css 复制代码

/* 当鼠标悬停在链接上时，将链接的文本颜色改为红色 */
a:hover {
  color: red;
}

6、伪元素选择器

用于选择元素的某个部分。例如，::before可以在元素内容的前面插入新内容。

css 复制代码

/* 在所有段落的内容前添加一个红色的星号 */
p::before {
  content: "★ ";
  color: red;
}

7、后代选择器

选择某元素内部的后代元素。例如，div p选择所有位于<div>元素内部的<p>元素。

css 复制代码

/* 选择<div>元素内部的所有<p>元素，并设置其字体颜色为灰色 */
div p {
  color: gray;
}

8、子选择器（`>`）

选择直接子元素。例如，ul > li仅选择直接位于<ul>元素内部的<li>元素。

css 复制代码

/* 仅为<ul>的直接子元素<li>设置列表项符号样式 */
ul > li {
  list-style-type: disc;
}

9、相邻兄弟选择器（`+`）

选择紧接在另一元素后的元素。例如，h1 + p选择紧跟在<h1>元素后的第一个<p>元素。

css 复制代码

/* 为紧跟在<h2>元素后的第一个<p>元素设置顶部边距 */
h2 + p {
  margin-top: 0;
}

10、通用兄弟选择器（`~`）

选择同一父元素下，某元素之后的所有兄弟元素。例如，h1 ~ p选择所有在<h1>元素之后的<p>元素。

css 复制代码

/* 为所有紧跟在<h2>元素后的<p>元素设置文本缩进 */
h2 ~ p {
  text-indent: 1.5em;
}

这些选择器可以组合使用，以创建更具体的选择规则，满足复杂的样式需求。

十一、实际应用样例

下面是一个综合示例，展示了如何将不同的CSS选择器组合在一起，以实现复杂的样式设计。假设我们有一个博客页面，其中包含标题、多个帖子（每个帖子都有标题、内容和评论），以及一些链接。我们将应用不同的样式来美化这个页面。

HTML示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="blog">
  <h1>我的博客</h1>
  <article class="post">
    <h2>帖子标题</h2>
    <p>这是帖子的内容...</p>
    <p class="comment">这是一个评论。</p>
  </article>
  <article class="post highlight">
    <h2>另一个帖子标题</h2>
    <p>这是另一个帖子的内容...</p>
    <p class="comment">这是另一个评论。</p>
  </article>
  <a href="#">更多帖子</a>
</div>

</body>
</html>

CSS样式（style.css）：

css 复制代码

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

/* ID选择器 */
#blog {
  margin: 20px;
}

/* 类选择器 */
.post {
  background-color: #f9f9f9;
  margin-bottom: 20px;
  padding: 10px;
}

/* 属性选择器 */
a[href="#"] {
  color: green;
}

/* 伪类选择器 */
a:hover {
  text-decoration: none;
}

/* 伪元素选择器 */
.post > h2::after {
  content: " - 阅读更多";
  font-size: 14px;
  color: #777;
}

/* 后代选择器 */
#blog .post p {
  line-height: 1.6;
}

/* 子选择器 */
#blog > h1 {
  color: navy;
}

/* 相邻兄弟选择器 */
.post + .post {
  border-top: 2px solid #eee;
}

/* 通用兄弟选择器 */
.highlight ~ a {
  font-weight: bold;
}

/* 组合使用 */
#blog .post.highlight > h2 {
  color: red;
}

#blog .post p.comment {
  font-style: italic;
  color: #999;
}

在这个示例中，我们使用了各种选择器来实现不同的样式效果：

使用ID选择器（#blog）为博客容器添加边距。
使用元素选择器（body）设置全局字体。
使用类选择器（.post和.highlight）为帖子和高亮帖子设置背景和颜色。
使用属性选择器（a[href="#"]）为特定链接设置颜色。
使用伪类选择器（a:hover）移除链接悬停时的下划线。
使用伪元素选择器（.post > h2::after）在帖子标题后添加额外的文本。
使用后代选择器（#blog .post p）设置帖子段落的行高。
使用子选择器（#blog > h1）为博客标题设置颜色。
使用相邻兄弟选择器（.post + .post）在帖子之间添加顶部边框。
使用通用兄弟选择器（.highlight ~ a）为紧跟在高亮帖子后的所有链接设置加粗样式。
组合使用选择器（#blog .post.highlight > h2和#blog .post p.comment）为高亮帖子的标题和所有帖子的评论设置特定样式。

这个示例展示了如何通过组合不同的CSS选择器来实现复杂的页面布局和样式设计。

CSS常见的选择器介绍

1、元素选择器：

2、类选择器：

3、 ID选择器：

4、属性选择器

5、伪类选择器

6、伪元素选择器

7、后代选择器

8、子选择器 （>）

9、相邻兄弟选择器 （+）

10、通用兄弟选择器 （~）

十一、实际应用样例

HTML示例：

CSS样式（style.css）：

8、子选择器（`>`）

9、相邻兄弟选择器（`+`）

10、通用兄弟选择器（`~`）