CSS 组合选择符

---

CSS 组合选择符

在 CSS 中，你可以使用组合选择符来选择和操作多个元素。以下是一些常见的组合选择符：

1. 后代选择符（Descendant Selector）：如果你想选择特定元素的所有后代，无论它们在 DOM 树中的层级如何，你可以使用空格来分隔元素。例如，div p 将选择所有在 div 元素内的 p 元素。
2. 子元素选择符（Child Selector）：如果你只想选择一个元素的直接子元素，你可以使用 > 符号。例如，div > p 将选择所有直接被 div 元素包裹的 p 元素。
3. 相邻兄弟选择符（Adjacent Sibling Selector）：如果你想选择在 DOM 树中紧跟在另一个元素之后的元素，你可以使用 + 符号。例如，div + p 将选择所有紧跟在 div 元素之后的 p 元素。
4. 通用兄弟选择符（General Sibling Selector）：如果你想选择在 DOM 树中跟在另一个元素后面的所有兄弟元素，你可以使用 ~ 符号。例如，div ~ p 将选择所有跟在 div 元素后面的 p 元素。
5. 属性选择符（Attribute Selector）：可以用来选择带有指定属性的元素。例如，a[href] 将选择所有带有 href 属性的 a 元素。
6. 伪类选择符（Pseudo-class Selector）：这些选择符用于选择处于特定状态的元素，例如鼠标悬停或被点击的元素。例如，a:hover 将选择所有鼠标悬停在其上的 a 元素。

这些选择符可以单独使用，也可以组合使用，以选择复杂的元素模式。例如，div.main > p:first-child 将选择所有 div 元素（这些 div 元素要有 class 属性的值为 main）的第一个 p 子元素。

一，后代选取符

在CSS中，后代选择符可以选择作为某元素后代的元素。

后代选择符的语法是简单的。在后代选择符中，规则左边的选择符一端包括两个或多个用空格分隔的选择符。选择符之间的空格是一种结合符，可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”。

例如，如果我们想选择div元素的所有p后代元素，我们可以这样写：div p。这个选择器会作用于div元素的所有后代p元素，不论p元素在div元素的嵌套层次中的位置如何。

可以说，后代选择符中的空格，是用来表示后代层级的，当然就不限于二级的。根据需要，从任一个祖先元素开始，直到想应用样式的那个元素，都可以被放到后代选择符链中。

下面是一个后代选择符的示例：

HTML代码：

<div>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

CSS代码：

div p {
  color: red;
}

在上述CSS代码中，div p是一个后代选择符，它会选取div元素内的所有p元素，并将其颜色设置为红色。因此，两个p元素的文本颜色都会变成红色。

二，子元素选择符

CSS子元素选择符可以选择作为某个元素的直接子元素的元素。

子元素选择符的语法是在两个元素之间放置一个大于符号（>），表示只选择作为某个元素的直接子元素的元素，而不包括后代元素。

例如，如果我们想选择只作为h1元素子元素的strong元素，我们可以这样写：h1 > strong。这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响。

下面是一个子元素选择符的示例：

HTML代码：

<div>
  <p>This is a paragraph.</p>
</div>
<p>This is another paragraph.</p>

CSS代码：

div > p {
  color: red;
}

在上述CSS代码中，div > p是一个子元素选择符，它会选取所有作为div元素直接子元素的p元素，并将其颜色设置为红色。因此，第一个p元素的文本颜色会变成红色，而第二个p元素的文本颜色不会改变。

三，相邻兄弟选择符

相邻兄弟选择符是CSS选择符的一种，用来选取在另一元素后紧接的元素，并且二者有相同父元素。

它的语法是 [选择器A + 选择器B]，表示找到与A元素相邻的B元素。例如，h1 + p 选择符就表示选择紧接在h1元素后的p元素，并可以设置这个p元素的样式。

下面是一个相邻兄弟选择符的示例：

HTML代码：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

CSS代码：

li + li {
  font-weight: bold;
}

在上述CSS代码中，li + li是一个相邻兄弟选择符，它会选取所有在li元素后面的兄弟li元素，并将其字体加粗。因此，列表中的第二个和第三个项目将会被加粗。第一个列表项不受影响。

四，通用兄弟选择符

通用兄弟选择符在CSS中是用来选取在另一元素后面的所有兄弟元素，二者有相同父元素。

它的语法是 [选择器A ~ 选择器B]，表示找到与A元素同级的所有B元素。例如，h1 ~ p 选择符就表示选择所有跟在h1元素后面的p元素，并可以设置这些p元素的样式。

下面是一个通用兄弟选择符的示例：

HTML代码：

<div>
  <p>I'm div sibling #1</p>
  <p>I'm div sibling #2</p>
  <p>I'm div sibling #3</p>
</div>
<div>
  <p>I'm div sibling #4</p>
  <p>I'm div sibling #5</p>
  <p>I'm div sibling #6</p>
</div>

CSS代码：

div ~ p {
  color: green;
}

在上述CSS代码中，div ~ p是一个通用兄弟选择符，它会选取所有在div元素后面的p元素，并将其颜色设置为绿色。因此，所有在div元素后面的p元素（即，从“I’m div sibling #2”到“I’m div sibling #6”）都会被涂成绿色。

五，属性选择符

在CSS中，属性选择器是一种非常有用的工具，用于选择具有特定属性或属性值的HTML元素。以下是一些常见的属性选择器及其示例：

1. [attr] 选择器用于选择带有指定属性的所有元素。例如，input[type] 会选择所有具有type属性的input元素。
2. [attr = value] 选择器用于选择带有指定属性和特定值的所有元素。例如，a[href = "https://www.example.com"] 会选择所有href属性值为"https://www.example.com"的a元素。
3. [attr ~= value] 选择器用于选择带有指定属性，且其值以特定字符串开头的所有元素。例如，a[title ~= "hello"] 会选择所有title属性值中包含"hello"的a元素。
4. [attr |= value] 选择器用于选择带有指定属性，且其值以特定字符串开头的所有元素。例如，input[type |= "text"] 会选择所有type属性值以"text"开头的input元素。

以上是属性选择器的基本形式，当然还可以进行更复杂的组合以满足特定的选择需求。请记住，在创建复杂的CSS选择器时，始终需要确保它们易于理解和维护，并尽可能限制其使用范围，以便保持代码的清晰和可维护性。

六，伪类选择符

伪类选择符是CSS选择器的一种，它允许你给HTML中不存在的标签（或标签的某种状态）设置样式。

伪类选择符的语法是：元素标签 伪类 名称 {属性:属性值;}。例如，你可以使用“a:hover”来为链接添加鼠标悬停时的样式，使用“p:first-child”来为每个段落的第一行设置样式。

伪类选择符有很多种，包括但不限于：

• a:link：为未访问的链接设置样式
• a:hover：为鼠标移动到链接上时设置样式
• a:active：为鼠标按下链接时设置样式
• a:visited：为已访问的链接设置样式
• e:first-child：为某个元素的所有子元素中的第一个元素设置样式
• e:last-child：为某个元素的所有子元素中的最后一个元素设置样式
• e:only-child：如果某个元素是其父元素的唯一子元素，那么为这个元素设置样式
• e:nth-child(n)：为每个第 n 个子元素设置样式
• e:nth-last-child(n)：为每个倒数第 n 个子元素设置样式

记住，虽然伪类选择符可以提供很多有用的功能，但并不是所有的浏览器都完全支持这些选择符，因此在使用时需要注意兼容性问题。