掌握 CSS 选择器：从初学者到专家的完整指南

标签。

2. 子选择器

仅针对直接子级，使用 > 符号。

ul > li {
  list-style-type: square;
}

3. 相邻兄弟选择器

使用 符号定位紧随指定元素之后的第一个元素。

h1 + p {
  font-style: italic;
}

4. 通用兄弟选择器

使用 ~ 符号定位指定元素之后的所有同级元素。

h1 ~ p {
  color: gray;
}

高级选择器：为现代网页设计提供动力

1. 属性选择器

属性选择器根据元素的属性或属性值来定位元素。

示例：

• 匹配具有特定属性的元素：

input[type] {
  border: 1px solid #000;
}

• 匹配具有特定属性值的元素：

input[type="text"] {
  background-color: lightblue;
}

• 匹配属性以值开头的元素：

a[href^="https"] {
  color: green;
}

2. 伪类

伪类定义元素的特殊状态。

常见的伪类：

• :hover：当用户将鼠标悬停在元素上时应用样式。

button:hover {
  background-color: lightcoral;
}

• :nth-child(n)：根据元素在父级中的位置定位元素。

li:nth-child(2) {
  font-weight: bold;
}

• :not(selector)：从选择中排除元素。

div:not(.exclude) {
  border: 1px solid black;
}

3. 伪元素

伪元素为元素的特定部分设置样式。

示例：

• ::before：在元素之前添加内容。

p::before {
  content: "note: ";
  font-weight: bold;
}

• ::after：在元素之后添加内容。

p::after {
  content: " [end]";
}

4. 复杂选择的组合器

组合选择器以实现强大、精确的定位。

• 后代组合器：

nav ul li a {
  text-decoration: none;
}

• 子组合器：

section > article {
  margin-bottom: 20px;
}

使用高级选择器的技巧

1. 保持可读性：过于复杂的选择器可能会让协作者感到困惑。
2. 优化性能：浏览器从右到左评估选择器，因此避免过于宽泛的模式。
3. 定期测试：确保您的选择器针对不同浏览器中的预期元素。

关于 css 选择器的常见问题解答

id 选择器和类选择器有什么区别？

• id 是唯一的，适用于一个元素，而 class 可以重复用于多个元素。

我可以一起使用多个伪类吗？

是的，您可以链接伪类。例如：

a:visited:hover {
  color: purple;
}

属性选择器与类相比如何？

属性选择器更加动态，可以定位元素，而不需要额外的 class 或 id 属性。

结论

css 选择器是任何网页设计的基础。通过掌握它们，您可以将您的网站转变为具有视觉吸引力和用户友好体验的网站。从基础知识开始，探索中级选择器，并利用高级技术将您的技能提升到一个新的水平。

尝试这些选择器，看看它们在您的项目中产生的差异！