CSS 选择器是用于选择 HTML 元素并应用样式的模式。了解 CSS 选择器的规则和用法是掌握 CSS 的关键。以下是详细解释 CSS 选择器的一些主要类型和它们的用法：
1. 基本选择器
元素选择器
选择所有指定的 HTML 元素。
p {
color: blue;
}
以上选择器将所有 <p> 元素的文本颜色设置为蓝色。
类选择器
选择具有指定类的所有元素。
.intro {
font-size: 20px;
}
以上选择器将所有 class="intro" 的元素字体大小设置为 20 像素。
ID 选择器
选择具有指定 ID 的唯一元素。
#header {
background-color: yellow;
}
以上选择器将 id="header" 的元素背景颜色设置为黄色。
通配符选择器
选择所有元素。
* {
margin: 0;
padding: 0;
}
以上选择器将所有元素的外边距和内边距设置为 0。
2. 属性选择器
选择具有指定属性的元素。
a[target="_blank"] {
color: red;
}
以上选择器将所有 target 属性值为 _blank 的链接颜色设置为红色。
3. 组合选择器
后代选择器
选择所有是某个元素后代的元素。
div p {
color: green;
}
以上选择器将所有 div 元素内的 p 元素文本颜色设置为绿色。
子选择器
选择所有是某个元素子元素的元素。
ul > li {
list-style-type: none;
}
以上选择器将所有 ul 元素的直接子元素 li 的列表样式设置为无。
相邻兄弟选择器
选择紧接在某个元素后的兄弟元素。
h1 + p {
margin-top: 0;
}
以上选择器将紧接在 h1 元素后的 p 元素的上边距设置为 0。
通用兄弟选择器
选择某个元素后面的所有兄弟元素。
h1 ~ p {
color: gray;
}
以上选择器将所有跟在 h1 元素后的 p 元素文本颜色设置为灰色。
4. 伪类选择器
选择元素的特定状态。
a:hover {
color: orange;
}
以上选择器将鼠标悬停在链接上的时候，链接颜色设置为橙色。
常见的伪类选择器包括：
:first-child:last-child:nth-child(n):hover:focus:active
5. 伪元素选择器
选择元素的特定部分。
p::first-line {
font-weight: bold;
}
以上选择器将所有 p 元素的第一行文本设置为粗体。
常见的伪元素选择器包括：
::before::after::first-letter::first-line
6. 组合选择器
将多个选择器组合在一起。
p.intro, div.highlight {
border: 1px solid black;
}
以上选择器将 class="intro" 的 p 元素和 class="highlight" 的 div 元素的边框设置为黑色实线。
References:
- MDN Web Docs：CSS selectors
- W3Schools：CSS Selectors Reference