CSS 平级和儿子级样式写法示例-猿码集

1. CSS 平级和儿子级样式写法示例

在CSS中，平级样式是通过使用兄弟选择器来实现的。兄弟选择器（也被称为邻接选择器）选择在同一级别上的元素。这意味着选择器仅选择在同一父元素下的相邻兄弟元素。

要使用平级样式，您需要了解以下的写法：element1~element2。这个写法会选择element1后面的所有element2元素。

下面是一个平级样式的示例：


/* 选择所有紧跟在class为first的div后的所有p元素，并将它们的背景颜色设为红色 */
.first~p {
  background-color: red;
}

在上面的示例中，我们选择了class为first的div后的所有p元素，并将它们的背景颜色设为红色。

在CSS中，儿子级样式是通过使用子选择器来实现的。子选择器只选择作为某个元素的直接子元素的元素。

要使用儿子级样式，您需要了解以下的写法：element1 > element2。这个写法会选择element1的所有直接子元素element2。

下面是一个儿子级样式的示例：


/* 选择所有class为parent的div的直接子元素class为child的div，并将它们的文字颜色设为蓝色 */
.parent > .child {
  color: blue;
}

在上面的示例中，我们选择了class为parent的div的直接子元素class为child的div，并将它们的文字颜色设为蓝色。

虽然平级和儿子级样式都可以用来选择元素，但两者之间有着一些差异。

平级样式选择器选择的是同一级别上的相邻兄弟元素，而儿子级样式选择器选择的是作为某个元素的直接子元素的元素。

以一个示例来说明：


<div class="parent">
  <p>Paragraph 1</p>
  <div class="child">
    <p>Paragraph 2</p>
  </div>
  <p>Paragraph 3</p>
</div>

如果我们使用平级样式选择器选择父元素后的p元素，代码如下：


.parent ~ p {
  /* 样式 */
}

在这个例子中，平级样式选择器选择的是class为parent的div后的所有p元素（Paragraph 1和Paragraph 3都被选择）。

而如果我们使用儿子级样式选择器选择父元素的直接子元素p元素，代码如下：


.parent > p {
  /* 样式 */
}

在这个例子中，儿子级样式选择器选择的是class为parent的div的直接子元素p元素（只有Paragraph 1被选择）。

在CSS中，选择器的特定性（specificity）决定了哪个样式将被应用到元素上。元素的特定性由选择器的组合方式来确定。

平级样式选择器的特定性较低，因为它只选择相邻的兄弟元素。而儿子级样式选择器的特定性较高，因为它只选择作为某个元素的直接子元素的元素。

如果两个选择器具有相同的特定性，则最后定义的样式将被应用。如果两个选择器具有不同的特定性，具有更高特定性的样式将被应用。

在CSS中，平级样式选择器和儿子级样式选择器都是用来选择元素的。平级样式选择器选择的是同一级别上的相邻兄弟元素，而儿子级样式选择器选择的是作为某个元素的直接子元素的元素。

了解这些选择器的用法和差异对于编写灵活且有效的CSS样式非常重要。根据具体的需求选择合适的选择器可以更好地控制网页的布局和样式。