CSS3 的高级选择器 (Advanced Selectors)

11. CSS3 的高级选择器 (Advanced Selectors)

11.1 结构性伪类 (Structural Pseudo-classes)

结构性伪类 允许你选择特定位置或状态的元素，基于它们在 DOM 中的位置或结构。

:nth-child()：

• 选择元素的子元素，根据指定的模式进行选择。

示例代码：

/* 选择每个第三个子元素 */
:nth-child(3n) {
  background-color: lightblue;
}

解释：

• :nth-child(3n) 选择每个第 3 个子元素，背景颜色为浅蓝色。

:nth-of-type()：

• 选择指定类型的元素，在同类型的兄弟元素中按模式选择。

示例代码：

/* 选择每个第二个 <p> 元素 */
p:nth-of-type(2n) {
  font-weight: bold;
}

解释：

• p:nth-of-type(2n) 选择每个第二个 <p> 元素，字体加粗。

:first-child 和 :last-child：

• 选择父元素的第一个和最后一个子元素。

示例代码：

/* 选择每个父元素的第一个子元素 */
:first-child {
  font-size: 20px;
}

/* 选择每个父元素的最后一个子元素 */
:last-child {
  color: red;
}

解释：

• :first-child 选择每个父元素的第一个子元素，字体大小为 20px。
• :last-child 选择每个父元素的最后一个子元素，字体颜色为红色。

:only-child：

• 选择只有一个子元素的父元素中的唯一子元素。

示例代码：

/* 选择父元素中唯一的子元素 */
:only-child {
  border: 2px solid black;
}

解释：

• :only-child 选择父元素中唯一的子元素，添加黑色边框。

11.2 伪元素 (Pseudo-elements)

伪元素 允许你对元素的特定部分应用样式，如内容的前面或后面。

::before 和 ::after：

• 在元素内容的前面或后面插入内容。

示例代码：

/* 在每个 <h2> 元素的前面插入图标 */
h2::before {
  content: "🔔";
  margin-right: 10px;
}

/* 在每个 <h2> 元素的后面插入装饰 */
h2::after {
  content: " ★";
  color: gold;
}

解释：

• h2::before 在 <h2> 元素的前面插入一个铃铛图标。
• h2::after 在 <h2> 元素的后面插入一个金色星星。

::first-line 和 ::first-letter：

• 选择元素的第一行或第一字母进行样式化。

示例代码：

/* 选择每个段落的第一行 */
p::first-line {
  font-weight: bold;
}

/* 选择每个段落的第一字母 */
p::first-letter {
  font-size: 2em;
  color: blue;
}

解释：

• p::first-line 选择每个 <p> 元素的第一行，字体加粗。
• p::first-letter 选择每个 <p> 元素的第一字母，字体大小为 2em，颜色为蓝色。

11.3 属性选择器 (Attribute Selectors)

属性选择器 允许你根据元素的属性及其值选择元素。

基本语法：

• [attribute]：选择具有指定属性的元素。
• [attribute=value]：选择具有指定属性值的元素。
• [attribute^=value]：选择属性值以指定值开头的元素。
• [attribute$=value]：选择属性值以指定值结尾的元素。
• [attribute*=value]：选择属性值包含指定值的元素。

示例代码：

/* 选择所有具有 href 属性的 <a> 元素 */
a[href] {
  color: blue;
}

/* 选择 href 属性值为 # 的 <a> 元素 */
a[href="#"] {
  font-weight: bold;
}

/* 选择 href 属性值以 "http" 开头的 <a> 元素 */
a[href^="http"] {
  color: green;
}

/* 选择 href 属性值以 ".com" 结尾的 <a> 元素 */
a[href$=".com"] {
  color: red;
}

/* 选择 href 属性值包含 "example" 的 <a> 元素 */
a[href*="example"] {
  text-decoration: underline;
}

解释：

• a[href] 选择所有具有 href 属性的 <a> 元素，颜色为蓝色。
• a[href="#"] 选择 href 属性值为 # 的 <a> 元素，字体加粗。
• a[href^="http"] 选择 href 属性值以 http 开头的 <a> 元素，颜色为绿色。
• a[href$=".com"] 选择 href 属性值以 .com 结尾的 <a> 元素，颜色为红色。
• a[href*="example"] 选择 href 属性值包含 example 的 <a> 元素，文本下划线。

11.4 伪类选择器的高级用法

:not()：

• 选择不符合指定选择器的元素。

示例代码：

/* 选择所有不含 .exclude 类的 <div> 元素 */
div:not(.exclude) {
  background-color: lightgray;
}

解释：

• div:not(.exclude) 选择所有不包含 .exclude 类的 <div> 元素，背景颜色为浅灰色。

:nth-last-child()：

• 从元素的最后一个子元素开始选择。

示例代码：

/* 选择每个倒数第二个子元素 */
:nth-last-child(2) {
  color: purple;
}

解释：

• :nth-last-child(2) 选择每个倒数第二个子元素，颜色为紫色。

---

以上就是 CSS3 的高级选择器 (Advanced Selectors) 的详细讲解。通过使用这些选择器，你可以更精确地选择和样式化网页上的元素，使你的 CSS 更加灵活和强大。