如何避免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>