0

我如何在 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>

尝试在不改变第二段颜色的情况下将文本“第一段”变为“颜色：红色”。

我试过了：

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

这不是家庭作业；Twitter Bootstrap 通过更改地图上控件的 max-width 和 line-height 属性来搞乱谷歌地图。我希望引导程序应用于信息窗口（打开时位于元素内部），而不是缩放控件或距离比例。

编辑 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 中的任何元素除外。

4

2 回答 2

0

我相信只有.ElementB在#ElementA. 在你的情况下，答案是这样的：

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

请参阅小提琴示例。

如果您打算.ElementB自己也应用样式，那么继承的 css 会有一些其他问题（除非您不介意默认行为）。如果您不希望它们更改，则必须重置默认继承的属性：

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

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

请参阅小提琴示例。

于 2013-04-26T20:52:26.143 回答
0

您可以使用

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

在这里摆弄

新的例子。使用 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;
    }

两者都可以！

对应的小提琴在这里

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

于 2013-04-26T19:08:34.653 回答