如何只选择没有子元素的元素？ [复制]答案

【问题标题】：How to select element only without its child? [duplicate]如何只选择没有子元素的元素？ [复制]
【发布时间】：2016-10-23 17:09:02
【问题描述】：

假设我有一个div 和id="main"，其中包含多级随机元素随机元素：

 <div id="main">
    Main text
    <div>Random element
         <a>Random element
            <p>Random element</p>
         </a>
    </div>
 </div>

我如何只定位#main 的内容而不包含其所有子元素"Main text"？

【问题讨论】：

使用#main，您正在只选择顶级元素，但子元素正在继承一些属性。例如，尝试在 #main 上设置边框 - 它不会应用于所有子项。

标签： html css css-selectors selector

【解决方案1】：

在这种情况下，为了正常工作，您应该对 HTML 结构进行一些更改。因此，使用 CSS 选择器，您可以正确选择目标。像这样的：

HTML：

<div id="main">
    <p>Main text</p>
    <div class="random">
        <p>random text</p>
        <p>random text</p>
        <a href="#">
            <p>random text</p>
        </a>
    </div>
</div>

CSS：

#main > p {
    color: red;
}

【讨论】：