CSS 选择器 用于选择要在网页上设置样式的 HTML 元素。它们允许您定位特定元素或元素组以应用颜色、字体、边距等样式。
选择器选择的元素称为选择器的主题。
CSS 通用选择器
通用选择器，用星号 （ * ） 表示，是一个特殊的选择器，用于匹配 HTML 文档中的所有元素。这些通常用于向文档中的所有元素添加相同的长度边距和填充。
语法
* {
margin: 0;
padding: 0;
}
根据上述语法，通用选择器用于将边距和填充 0 应用于所有 HTML 元素。
例子
以下示例演示了通用选择器 （ * ） 的用法：
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
background-color: peachpuff;
color: darkgreen;
font-size: 25px;
}
</style>
</head>
<body>
<h1>通用选择器（*）示例</h1>
<div>
父元素
<p>子段落 1</p>
<p>子段落 2</p>
</div>
<p>第3段文字</p>
</body>
</html>
CSS 元素选择器
元素选择器以 HTML 元素为目标，例如 <h1>、<p> 等。当我们想要对文档所有 <p> 或 <h1> 标签应用相似的样式时，可以使用此功能。
语法
/* 将所有p标签的文本颜色设置为绿色 */
p {
color: green;
}
/* 为文档中的所有h1标记添加下划线 */
h1 {
text-decoration-line: underline;
}
例子
以下示例演示元素选择器的用法：
<html>
<head>
<style>
div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
p {
color: green;
}
h1 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<div>
<h1>元素选择器</h1>
<p>Div 边框 </p>
<p>文本居中对齐</p>
<p>绿色段落</p>
<p>带下划线的h1</p>
</div>
</body>
</html>
CSS 类选择器
类选择器使用其 class 属性 的特定值定位元素以设置其样式。CSS 的类用句点（ . ）符号表示。
语法
.sideDiv {
text-decoration-line: underline;
}
.topDiv {
color: green;
font-size: 25px;
}
示例
<html>
<head>
<style>
.style-div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
.topDivs{
font-weight: bold;
font-size: 30px;
}
.bottomDivs{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<div class="style-div">
<div class="topDivs">
Hello World
</div>
<div class="topDivs">
学习CSS
</div>
<div class="bottomDivs">
欢迎访问
</div>
<div class="bottomDivs">
启科普在线教程:www.qikepu.com
</div>
</div>
</body>
</html>
CSS ID 选择器
ID 选择器针对具有 id 属性特定值的单个元素来设置其样式。CSS 中的 id 由 哈希（ # ）符号表示。同一类可以应用于多个元素，但 id 对于元素是唯一的。
语法
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
text-decoration-line: underline;
color: red;
}
例子
以下示例演示了 id 选择器的使用，其中 #style-div、#qikepu 和 #stylePoint 是应用于元素的 id 选择器：
<html>
<head>
<style>
#style-div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
#qikepu{
color: green;
font-size: 20px;
}
#stylePoint{
color: black;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="style-div">
<div id="qikepu">
启科普教程
<span id="stylePoint">
欢迎大家！
</span>
</div>
<p>在这里，我们对不同元素使用了id。</p>
</div>
</body>
</html>
CSS 属性选择器
属性选择器根据特定属性或元素上的属性值来定位元素。
有关属性选择器的详细说明，请参阅此 属性选择器 文章。
语法
/* 使用目标属性设置所有锚点标签的样式 */
a[target] {
background-color: peachpuff;
}
/* 设置链接到启科普 www.qikepu.com 的所有锚点标签样式 */
a[href="https://www.qikepu.com"] {
background-color: peachpuff;
}
示例
以下示例演示了属性选择器的用法：
<html>
<head>
<style>
a[href]{
font-size: 2em;
}
a[target] {
background-color: peachpuff;
color: blueviolet;
}
/* 具有值的属性具有更高的优先级 */
/* 因此，CSS链接采用了黑色背景 */
a[target="_self"] {
background-color: black;
}
</style>
</head>
<body>
<h2>属性选择器</h2>
<p>锚定元件的造型：</p>
<a href="https://www.qikepu.com/">启科普</a>
<br><br>
<a href="/html/index.html" target="_blank">HTML 教程</a>
<br><br>
<a href="/css/index.html" target="_self">CSS 教程</a>
</body>
</html>
CSS 组选择器
CSS 组选择器允许我们一次对多个元素应用相同的样式。元素的名称可以用 逗号（ , ）分隔。建议使用此方法，因为它可以保持 CSS 的简洁性并避免冗余。
语法
/* 为h1和h2应用相同的背景颜色 */
h1, h2 {
background-color: grey;
}
示例
以下示例演示如何在 CSS 使用组选择器。
<html>
<head>
<style>
/* 适用于<h1>和<h2>元素 */
h1, h2 {
background-color: grey;
padding: 4px;
}
/* 适用于所有具有类的段落和元素 */
/* “highlight”，以及ID为“highlightSpan”的元素 */
p, .highlight, #hightlightSpan {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS选择器</h1>
<h2>组选择器</h2>
<p>这是一个段落。</p>
<div class="highlight">这是一个div</div>
<br>
<span id="hightlightSpan">这是一个span</span>
</body>
</html>
CSS 伪类选择器
伪类选择器用于设置元素的特定状态样式，例如 :hover 用于在悬停时设置元素的样式。
有关 伪类选择器 的详细列表，请参阅此 CSS 伪类 教程。
语法
/* 鼠标悬停时更改背景颜色 */
a :hover {
background-color: peachpuff;
}
/* 单击按钮时更改背景颜色 */
button:active {
background-color: yellow;
}
/* 获得焦点输入时更改边框颜色 */
input:focus {
border-color: blue;
}
示例
以下示例演示 伪类选择器 的用法：
<html>
<head>
<style>
a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
button:active {
background-color: yellow;
}
</style>
</head>
<body>
<h2>伪类选择器</h2>
<p>锚定元件和带有伪类的按钮：</p>
<a href="https://www.qikepu.com">启科普</a>
<br><br>
<button>点击试试</button>
</body>
</html>
CSS 伪元素选择器
伪元素选择器 用于设置元素的特定部分的样式，而不是元素本身的样式。
有关 伪元素选择器 的详细列表，请参阅此 CSS 伪元素 教程。
语法
/* 在段落之前定义内容 */
a::before {
content: " ";
}
/* 段落首字母的样式 */
p::first-letter {
font-size: 2em;
}
示例
以下示例演示了伪元素选择器 ::before 和 ::after 的使用：
<html>
<head>
<style>
/* 在段落前添加内容并设置样式 */
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}
/* 在段落后添加内容并设置样式 */
p::after {
content: " [Read more]";
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h2>伪元素选择器</h2>
<p>这是一个段落。</p>
</body>
</html>
CSS 后代选择器
css 的 后代选择器 用于设置作为特定指定标签的子标签的所有标签的样式。父元素和子元素之间的单个空格用于提及作为后代。
语法
div p {
color: blue;
}
上述代码将 div 元素内的段落标签的文本颜色设置为蓝色。
示例
以下示例展示了如何在 css 使用后代选择器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
div{
border: 2px solid;
}
div p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>这个段落位于div内，并且显示蓝色。</p>
<section>
<p>这个段落位于div内的一个节内，也显示蓝色。</p>
</section>
</div>
<p>这个段落在div之外，不会显示蓝色。</p>
</body>
</html>
CSS 子选择器
css 子元素选择器用于定位特定元素的所有直接子元素。这用 大于（ > ）符号表示。
语法
div > p {
color: blue;
}
上面的代码将直接位于 div 元素内的段落标签的文本颜色设置为蓝色。
示例
以下示例展示了如何使用 css 子选择器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
div{
border: 2px solid;
}
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>此段落位于div内，显示蓝色的。</p>
<section>
<p>此段落位于div内的一个节内，不会显示蓝色，因为这不是直接的子节</p>
</section>
</div>
<p>此段落位于div之外，不会显示蓝色。</p>
</body>
</html>
CSS 相邻同级选择器
CSS 相邻同级选择器 用于定位紧接在指定元素前面的元素。加号 （ + ） 用于表示相邻的兄弟姐妹。
语法
h1 + p {
margin-top: 0;
}
上面的代码将紧跟在 h1 标签之后的段落标签的上边距设置为 0。
示例
以下示例演示如何使用 css 相邻同级选择器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
div{
border: 4px solid;
}
div + p {
color: blue;
}
</style>
</head>
<body>
<p>本段落位于div之上 ,不会显示蓝色。</p>
<div>
<p>此段落位于div内，也不会显示蓝色。</p>
</div>
<p>本段落在div之后，会显示蓝色。</p>
<p>这个第2段落之后的div，不会显示蓝色的。</p>
</body>
</html>
CSS 通用同级选择器
CSS 通用同级选择器 用于定位指定元素之前的所有元素。波浪号 （ ~ ） 用于表示一般兄弟姐妹。
语法
h1 ~ p {
color: gray;
}
上述代码将 h1 标签后所有段落的文本颜色设置为灰色。
示例
以下示例显示了如何使用 css 通用同级选择器。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
div{
border: 4px solid;
}
div ~ p {
color: blue;
}
</style>
</head>
<body>
<p>本段落位于div之上，不会显示蓝色。</p>
<div>
<p>此段落位于div中，不会显示蓝色。</p>
</div>
<p>这个在div后面的第 1 段文字，显示蓝色。</p>
<p>这个在div后面的第 2 段文字，也显示蓝色。</p>
</body>
</html>
CSS 嵌套选择器
CSS 嵌套允许将一个样式规则嵌套在另一个规则中，子规则的选择器相对于父规则的选择器。
CSS 嵌套选择器的特性
嵌套选择器显示父规则和子规则之间的关系。
- 当浏览器解析嵌套的选择器时，它会自动在选择器之间添加一个空格，从而创建一个新的 CSS 选择器规则。
- 在需要将嵌套规则附加到父规则（没有任何空格）的情况下，例如在使用伪类或复合选择器时，必须立即预置 & 嵌套选择器以实现所需的结果。
- 为了反转规则的上下文，可以附加 & 嵌套选择器。
- & 嵌套选择器可以有多个实例。
语法
nav {
& ul {
list-style: none;
& li {
display: inline-block;
& a {
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}
示例
以下示例演示 嵌套选择器 （&） 的使用：
<html>
<head>
<style>
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
& a {
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
}
</style>
</head>
<body>
<h1>& 嵌套选择器示例</h1>
<p id="sample">悬停 <a href="#">通过链接</a>.</p>
</body>
</html>
