CSS常见的选择器介绍

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

1、元素选择器：

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

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

2、类选择器：

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

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

3、 ID选择器：

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

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

4、属性选择器

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

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

5、伪类选择器

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

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

6、伪元素选择器

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

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

7、后代选择器

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

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

8、子选择器（`>`）

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

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

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

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

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

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

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

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

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

十一、实际应用样例

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

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）：

/* 元素选择器 */
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）为高亮帖子的标题和所有帖子的评论设置特定样式。