Как избежать определенного идентификатора внутри элемента в CSS?

Question

У меня есть эта структура в HTML

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

Как я могу написать правило CSS, что говорит, сделать все a тегов белого цвета внутри #A, но игнорировать то, что в #B?

Я бы предпочел иметь что-то вроде :not(#B) и не ставить другой тег обертки или что-то слишком жесткое.

Благодаря

Answer 1

Вы находитесь на правильном пути с :not(#B) уже.

Вы хотите отформатировать ссылки, которые являются прямыми дочерними элементами #A, и те, которые находятся далее по дереву, но не те, что указаны в #B.

/* 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; }

<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>

Edit: Как Amit отметил, #A :not(#B) a не будет работать для ссылок вложенными глубже в #B. Поэтому часть :not(#B) должна быть дочерью №A, #A > :not(#B) a. Пример отредактирован.

Answer 2

Если вы на самом деле пытаетесь предназначаться <a> теги, которые появляются под этими элементами и имели разметку, похожее на следующее:

<div id="A"> 
    <a href='#'>Test A1</a> 
     <div id="B"> 
      <a href='#'>Test B</a> 
     </div> 
    <a href='#'>Test A2</a> 
</div> 

Вы можете воспользоваться direct descendant operator> в CSS только целевых элементов непосредственно ниже #A, а не в это детей:

#A > a { 
    /* This will only target <a> elements that are beneath #A and not in #B */ 
    color: #FFF; 
} 

и примером этого может быть seen here и может выглядеть следующим образом:

Update

Похоже, что вы не хотите просто цели <a> тегов.Если это так, то вы, вероятно, можете обобщить предыдущее заявление только нацеливание элементов не в B под A:

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

Обновления примера разметки:

<div id="A"> 
    <a href='#'>Test A1</a> 
    <div id="B"> 
     <a href='#'>Test B</a> 
    </div> 
    <div id="C"> 
     I'm in C 
    </div> 
    <a href='#'>Test A2</a> 

все равно work as expected:

Answer 3

Лучшее решение (хотя до сих пор не perfext):

(Исправленная после комментария и с кодом @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>

Это все еще есть проблемы (IE 9+ и не если #B обернут), но это лучшее решение, которое у нас есть.

Некорректное, в противном случае решение (просто чтобы показать, что это не так):

#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 4

Почему бы не сделать просто:

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

Answer 5

Там нет решения, что "просто работает" без ограничения. Ваши лучшие усилия состоят в том, чтобы установить явные правила для элементов в вашем инвертированном селекторе (:not(#B)).

Причина этого заключается в том, что правила оцениваются «положительно», они смотрят на позитивный матч, так, например (взято с одного из других «неточных» ответов):

#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; }

<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>

<span> по этой ссылке служит положительным результатом для :not(#B), и логика прерывается.

Пожалуй, ближе вы можете получить путем ограничения матчи прямых детей плюс вложенными детей, у которых самый верхний родитель под A не B:

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

<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>

Но это также сломать бы, как только как любой элемент обертывает B.