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选择器来实现复杂的页面布局和样式设计。