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

【问题标题】：How to select element without selecting children elements如何选择元素而不选择子元素
【发布时间】：2019-04-24 21:24:04
【问题描述】：

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

div {
  border: solid;
}

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

它不仅使 large div 的边框为实心，还使 inner div 的边框为实心。

编辑：有没有一种方法可以选择更高的 div 而无需创建课程？

【问题讨论】：

它没有选择“all 子元素”——注意它没有选择子元素<p>s。它会选择 DOM 中的所有 divs，而不管它们在 DOM 树的层次结构中的什么位置。我推荐css-tricks.com/how-css-selectors-work
为你的 div 分配一个类并引用它
您只能选择顶级 div ... 选择一个 div 并设置其样式仅如果它是直接页面的子页面@ 987654326@ 元素：body > div { border: solid; } -- 但如果你有<body>..<main>..<div> .. </div>，那不会被选中。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：