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”而不改变第2段的颜色。

我试过了：

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

这不是作业; Twitter Bootstrap通过更改地图上控件的max-width和line-height属性来搞乱谷歌地图。我希望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;
}

小提琴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;
    }

两者都有效！

相应的小提琴here

记住：not选择器将按预期在其括号内使用复合选择器工作

Answer 2

我认为只有.ElementB是来自#ElementA的已知（设定）深度才能实现此目的。在你的情况下，答案是：

#ElementA > :not(.ElementB),
#ElementA > :not(.ElementB) * {
    /* styles to apply */
}

<强> See fiddle example.

如果您希望.ElementB本身也应用了样式，那么您有some other issues with inherited css（除非您不介意默认行为）。如果您不希望它们更改，则必须重置默认继承的属性：

#ElementA > *,
#ElementA > :not(.ElementB) * {
    border: 1px solid red;
    color: blue;
}

#ElementA > .ElementB * {
    color: black;
}

<强> See fiddle example.

当Element在ElementS中时，选择ElementA中不在Element内部的每个元素

2 个答案: