掌握各种 CSS 选择器，精确控制样式应用范围
选择所有指定标签的元素。
/* 选择所有 p 标签 */
p {
color: #333;
line-height: 1.6;
}选择所有具有指定 class 的元素。
/* 选择所有 class="button" 的元素 */
.button {
padding: 10px 20px;
background: #3498db;
}选择具有指定 ID 的元素（ID 应该唯一）。
/* 选择 id="header" 的元素 */
#header {
background: #2c3e50;
color: white;
}选择所有元素。
/* 选择所有元素 */
* {
margin: 0;
padding: 0;
}选择某个元素内的所有后代元素。
/* 选择 .container 内的所有 p 元素 */
.container p {
margin-bottom: 15px;
}选择某个元素的直接子元素。
/* 选择 .nav 的直接子元素 li */
.nav > li {
display: inline-block;
}选择某个元素的下一个相邻兄弟元素。
/* 选择 h2 后面的第一个 p 元素 */
h2 + p {
font-weight: bold;
}选择某个元素后面的所有兄弟元素。
/* 选择 h2 后面的所有 p 元素 */
h2 ~ p {
margin-left: 20px;
}/* 选择带有 type 属性的 input 元素 */
input[type] {
padding: 8px;
}
/* 选择 type="text" 的 input 元素 */
input[type="text"] {
border: 1px solid #ddd;
}
/* 选择 href 以 "https" 开头的 a 元素 */
a[href^="https"] {
color: #27ae60;
}
/* 选择 class 包含 "btn" 的元素 */
[class*="btn"] {
cursor: pointer;
}/* 鼠标悬停时 */
a:hover {
color: #3498db;
}
/* 元素被激活时 */
button:active {
transform: scale(0.95);
}
/* 元素获得焦点时 */
input:focus {
outline: 2px solid #3498db;
}
/* 键盘导航获得焦点时 */
input:focus-visible {
outline: 2px solid #3498db;
}/* 选择第 2 个 li 元素 */
li:nth-child(2) {
background: #f8f9fa;
}
/* 选择第一个 p 元素 */
p:first-of-type {
font-weight: bold;
}
/* 选择空元素 */
div:empty {
display: none;
}/* 选择被选中的 checkbox */
input:checked {
accent-color: #3498db;
}
/* 选择禁用的输入框 */
input:disabled {
opacity: 0.6;
}
/* 选择有效的输入框 */
input:valid {
border-color: #27ae60;
}
/* 选择无效的输入框 */
input:invalid {
border-color: #e74c3c;
}/* 在元素前添加内容 */
.quote::before {
content: "\";
font-size: 2em;
color: #3498db;
}
/* 在元素后添加内容 */
.price::after {
content: "元";
margin-left: 5px;
}
/* 选中文本的样式 */
::selection {
background: #3498db;
color: white;
}
/* 占位符文本样式 */
input::placeholder {
color: #999;
}
/* 列表标记样式 */
ul::marker {
color: #3498db;
}/* 优先级：10 */
.button {
background: blue;
}
/* 优先级：11 (10 + 1) */
button.button {
background: green;
}
/* 优先级：100 */
#submit {
background: red;
}某些 CSS 属性会从父元素继承到子元素，如字体、颜色等。
body {
font-family: Arial, sans-serif;
color: #333;
}
/* p 元素会继承 body 的字体和颜色 */
p {
font-size: 16px;
}