制作css选择器
CSS 选择器类型
元素选择器
直接使用 HTML 元素名称（如 p、div）匹配所有对应元素。
p {
color: blue;
}类选择器（Class Selector）
通过 . 加类名匹配元素（如 .header）。
.header {
font-size: 24px;
}ID 选择器
通过 # 加 ID 名匹配唯一元素（如 #main-content）。
#main-content {
background-color: #f0f0f0;
}组合选择器
后代选择器
用空格分隔，匹配嵌套结构的后代元素（如 div p）。
div p {
margin: 10px;
}子元素选择器
用 > 分隔，仅匹配直接子元素（如 ul > li）。
ul > li {
list-style: none;
}相邻兄弟选择器
用 + 分隔，匹配紧邻的同级元素（如 h1 + p）。
h1 + p {
font-weight: bold;
}通用兄弟选择器
用 ~ 分隔，匹配后续所有同级元素（如 h2 ~ p）。
h2 ~ p {
color: gray;
}属性选择器
基础属性匹配
通过 [attribute] 匹配包含指定属性的元素。
[target] {
border: 1px solid black;
}属性值匹配
精确匹配 [attribute="value"] 或部分匹配 [attribute*="value"]。
[type="text"] {
padding: 5px;
}
a[href*="example"] {
color: red;
}伪类与伪元素
伪类（状态选择）
以 : 开头，如 :hover、:nth-child(n)。
a:hover {
text-decoration: underline;
}
li:nth-child(odd) {
background: #eee;
}伪元素
以 :: 开头，如 ::before、::first-line。
p::first-line {
font-weight: bold;
}选择器优先级
优先级计算规则：
内联样式>ID>类/伪类/属性>元素/伪元素- 相同优先级时，后定义的样式生效。
示例：
#content .text { color: red; } /* 优先级高于 */
div p { color: blue; }
