制作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; }