Выбрать все элементы, кроме элементов с определенным классом

Question

У меня есть ниже CSS:

:not(.myid_templates_editor_element){ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font: 11px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #444; 
} 

Я хочу, чтобы выбрать все элементы на странице, кроме элемента вместе со своими детьми с классом myid_templates_editor_element. Мой код выше не работает. Как мне это сделать с помощью css?

Answer 1

Мне нужен HTML-код, чтобы решить эту проблему. Я могу подумать о возможном случае:

Вы используете CSS-фреймворк, а ваш собственный файл стилей - до - файл фреймворка css.

В этом случае, вы должны исправить или попробовать

:not(.myid_templates_editor_element){ 
    margin: 0 !important; 
    padding: 0 !important; 
    list-style-type: none !important; 
    font: 11px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 
    color: #444 !important; 
} 

Во всяком случае, то, что вы хотите сделать, это действительно плохая практика.

Answer 2

*{ 
 
color:red 
 

 
} 
 
:not(.myid_templates_editor_element){ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    font: 11px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    color: green; 
 
}

<div> 
 
    first apply 
 
</div> 
 
<span> 
 
first apply 
 
</span> 
 
<ul> 
 
    <li>first apply</li> 
 
</ul> 
 
<div class="myid_templates_editor_element"> 
 
    not to apply on me 
 
</div>

Answer 3

Из того, что я понимаю, вы хотите применить правило к каждому элементу в вашем DOM дерева, кроме .myid_templates_editor_element и это дети (.myid_templates_editor_element *).

Однако, CSS :notdoes not support combination selectors, поэтому что-то вроде :not(.myid_templates_editor_element):not(.myid_templates_editor_element *) невозможно.

Вам нужно будет найти обходной путь, то есть, устанавливая свои правила для всех элементов, то сброс для некоторых из них:

* { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font: 11px/16px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #444; 
} 

.myid_templates_editor_element, 
.myid_templates_editor_element * { 
    margin: auto; 
    padding: auto; 
    ... 
} 

Here's an example in JSFiddle с использованием пограничного цвета.