Question

当我选择一个元素时，它会选择所有个子元素。例如

div {
  border: solid;
}

<div>
  <p>
    Some Text
  </p>
  <div>
    <p>
      Some Text
    </p>
  </div>
  <p>
    Some Text
  </p>
</div>

这不仅使大 div的边界牢固，而且使内部 div的边界牢固。

编辑：有没有一种方法可以选择较高的div，而无需创建类？

Answer 1

您正在将样式应用于所有div，由于存在差异，它会创建一个类

.parent {
  border: solid black 1px;
}

.child {
  border: solid green 1px
}

<div class="parent">
  <p>
    Some Text
  </p>
  <div class="child">
    <p>
      Some Text
    </p>
  </div>
  <p>
    Some Text
  </p>
</div>

Answer 2

CSS选择器会将其样式应用于所有匹配的元素。如果您的样式使用div来匹配元素，则相关样式将应用于HTML中的所有div元素。（它不适用于任何p元素，因为它们不匹配）。在定位元素时，您需要找到一种更具体的方法。

一种方法可能是在HTML中向div添加一个类。例如div class="border-div"> ... </div>。现在可以使用选择器.border-div { ...在样式表中定位该元素。

另一种方法可能是使用一个选择器来定位父元素，而使用另一个选择器来定位子元素。例如，您可以像已经完成的那样将父div作为目标：使用选择器div { ...。但是您可以进一步定位其子级，并使用div div {...覆盖设置为父级的样式。更具体的选择器将始终覆盖较不具体的选择器。

有关有效CSS选择器的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

如何选择元素而不选择子元素

2 个答案: