如何避免CSS中元素内的特定ID？

Question

我在html中有这个结构

<div id="A">
   ....
   <div id="B">
      ....
   </div>
   ....
</div>

如何编写CSS规则，即所有a标记在#A内部变成白色，但忽略#B中的内容？

我更喜欢:not(#B)这样的东西，而不是放另一个包装标签或任何太硬编码的东西。

由于

Answer 1

最佳解决方案（尽管仍然不是完整版）：

（在评论和@Amit代码后更正）

/* Either directly under #A, or in an element in #A that's not #B */
/* The element that's not #B must be a direct child of #A, otherwise */
/* children of children of #B will be selected anyway, as @Amit pointed out. */
#A > a, #A > :not(#B) a { color:red }

<div id="A">
   <a>red</a>
   <div id="B">
      <a>black</a>
      <p>
        <a>black</a>
      </p>
   </div>
   <p>
     <a>red</a>
   </p>
</div>

这仍然存在问题（如果#B被包装，IE 9+并没有工作），但这是我们得到的最佳解决方案。

错误，失败的解决方案（只是为了表明错误）：

#A > a, #A :not(#B) a { color:red }

<div id="A">
   <a>red</a>
   <div id="B">
      <a>black</a>
      <p>
        <a>black</a>
      </p>
   </div>
   <p>
     <a>red</a>
   </p>
</div>

Answer 2

您已经在:not(#B)处于正确的轨道上。

您希望格式化#A的直接子级链接以及位于树下方的链接，而不是#B中的链接。

＆＃13;

＆＃13;

/* edited, was previously just #A > a, #A :not(#B) a, which won’t work for deeper nesting
   inside #B, as Amit pointed out */
#A > a, #A > :not(#B) a { color:green; }

/* for illustration purposes only */
#B { border:1px solid red; }
#B:before { content:"[I’m #B, my links aren’t green.]"; display:block; }
p { border:1px solid yellow; }
p:before { content:"[I’m a paragraph, the link inside me is not a child of #A.]"; display:block; }

＆＃13;

<div id="A">
  <a href="#">Link</a>
  <div id="B">
    <a href="#">Link</a>
    <span><a href="#">Link inside span</a></span>              
  </div>
  <p>
    <a href="#">Link</a>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：正如Amit指出的那样，#A :not(#B) a对于嵌套在#B中的链接不起作用。因此，:not(#B)部分必须是#A，#A > :not(#B) a的孩子。编辑的例子。

Answer 3

为什么不这样做：

#A a {
 color:#fff;
}
#B a {
 color:green;
}

Answer 4

没有解决方案＆＃34;只是工作＆＃34;没有限制。您应尽最大努力为您的否定选择器（:not(#B)）中的元素设置明确的规则。

这样做的原因是规则得到评估＆＃34;肯定＆＃34;，他们寻找积极匹配，例如（取自其中一个＆＃34;不准确＆＃34;答案）：< / p>

＆＃13;

＆＃13;

#A > a, #A :not(#B) a { color:green; }

/* for illustration purposes only */
#B { border:1px solid red; }
#B:before { content:"[I’m #B, my links aren’t green.]"; display:block; }
p { border:1px solid yellow; }
p:before { content:"[I’m a paragraph, the link inside me is not a child of #A.]"; display:block; }

＆＃13;

<div id="A">
  <a href="#">Link</a>
  <div id="B">
    <span>
      <a href="#">I am green after all</a>
    </span>
  </div>
  <p>
    <a href="#">Link</a>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

链接周围的<span>用作:not(#B)的正匹配，逻辑中断。

也许最接近的是限制匹配直接子项加上A下最顶层父级不是B的嵌套子项：

＆＃13;

＆＃13;

#A > a, #A > :not(#B) a { color:green; }

＆＃13;

<div id="A">
  <a href="#">Link</a>
  <div id="B">
    <span>
      <a href="#">I am really not green</a>
    </span>
  </div>
  <p>
    <a href="#">Link</a>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，只要任何元素包裹B，这也会中断。

Answer 5

如果您实际上是在尝试定位这些元素下显示的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> <input type="text" class="form-control" aria-label="..."> <span class="input-group-addon"> <span class="glyphicon glyphicon-search" aria-hidden="true"> </span></span> </div>标记，并且标记符如下所示：

<a>

您可以利用CSS中的direct descendant operator <div id="A"> <a href='#'>Test A1</a> <div id="B"> <a href='#'>Test B</a> </div> <a href='#'>Test A2</a> </div> 仅定位>正下方的元素，而不是其子代中的元素：

#A

这个例子可以是seen here，可能看起来像：

<强>更新

看起来您不想只定位#A > a { /* This will only target <a> elements that are beneath #A and not in #B */ color: #FFF; } 标签。如果是这种情况，您可以通过仅在A：

下定位不在B中的元素来概括先前的陈述

<a>

更新示例标记：

#A > :not(#B) {
    color: #FFF;
}

仍然会work as expected：