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

时间:2019-04-23 00:15:11

标签: css css-selectors

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

div {
  border: solid;
}
<div>
  <p>
    Some Text
  </p>
  <div>
    <p>
      Some Text
    </p>
  </div>
  <p>
    Some Text
  </p>
</div>

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

编辑:有没有一种方法可以选择较高的div,而无需创建类?

2 个答案:

答案 0 :(得分:0)

您正在将样式应用于所有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>

答案 1 :(得分:0)

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