css - 选择 ElementA 内不在 Element 内的每个元素，其中 Element 在 ElementS 内

Question

如何在 CSS 中编写这个想法:

选择 ElementA 内但不在 ElementB 内且 ElementB 在 ElementA 内的每个元素。

这是一个例子:

<table id="ElementA">
    <tr>
        <td>
            <p>Paragraph One</p>
        </td>
        <td class="ElementB">
            <p>Paragraph Two</p>
        </td>
    </tr>
</table>

尝试将文本“Paragraph One”变为“color: red”而不改变 Paragraph Two 的颜色。

我试过:

#ElementA *:not(.ElementB *) {
    color: #ff0000;
}

这不是作业； Twitter Bootstrap 通过更改 map 上控件的最大宽度和行高属性来扰乱谷歌地图。我希望 bootstrap 应用于信息窗口(打开时位于元素内部)而不是缩放控件或距离刻度。

编辑 1:关于如何使用您的解决方案的更好示例可能是这样的:

<div id="ElementA">
    <div>
        <p>Paragraph One</p>
    </div>
    <div class="ElementB">
        <div>
            <p>Paragraph Two</p>
            <h1>text</h1>
        </div>
    </div>
</div>

目标:将 css 属性应用于 ElementA 中的每个元素，但 ElementB 中的任何元素除外。

Answer 1

你可以使用

#ElementA td:not(.ElementB)  p{
    color: #ff0000;
}

fiddle here

新例子。使用 div 和不同的结构排序

现在，对于您之后发布的新示例，您可以使用其他解决方案。很像

为了

<div id="ElementA">
    <div>
        <p>Paragraph One</p>
    </div>
    <div class="ElementB">
        <div>
            <p>Paragraph Two</p>
            <h1>text</h1>
        </div>
    </div>
</div>

使用

 #ElementA >div:not(.ElementB)  {
    color: #ff0000;
}

或者如果你想更具体一些

#ElementA >div:not(.ElementB) p {
        color: #ff0000;
    }

两者都可以!

对应fiddle here

记住:非选择器与括号内的复合选择器一起工作时会像预期的那样工作