选择除具有特定类的元素之外的所有元素答案

【问题标题】：Select All Elements Except elements with a specific class选择除具有特定类的元素之外的所有元素
【发布时间】：2016-03-19 16:16:54
【问题描述】：

我有下面的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 做到这一点？

【问题讨论】：

我们需要 html 才能使其正常工作，请考虑使用 jsfiddle.com。
需要注意的一点是，您只选择了父级而不是其子级。并非父级的所有属性都由子级继承。除此之外，我看不出有什么不妥。当您说不起作用时，最好指出它不起作用的方式。

标签： html css css-selectors

【解决方案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;
}

不管怎样，你想做的都是一种非常糟糕的做法。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

据我了解，您希望将规则应用于 DOM 树中的每个元素，除了 .myid_templates_editor_element 及其子元素 (.myid_templates_editor_element *)。

但是，CSS :not does 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 使用边框颜色。

【讨论】：