相关疑难解决方法(0)

我正在尝试使用该:not()属性从规则中排除一对类,例如:

*:not(.class1, class2) { display: none; }

但是,看起来该not()属性不支持逗号分隔的类,如此小提琴中所示.

HTML:

<div class='one'>
  foo
</div>
<div class='two'>
  foo
</div>
<div class='three'>
  foo
</div>
<div class='four'>
  foo
</div>

CSS:

div {
  background-color: #CBA;
}

div:not(.one) {
  background-color: #ABC;
}

div:not(.one, .three) {
  color: #F00;
}

应用第一和第二规则,但第三规则不适用.

我做不到,*:not(.class1), *:not(.class2)因为任何元素class2都会被选中,*:not(.class1)反之亦然.

我不想这样做

* { display: none;}
.class1, .class2 { display: inline; }

因为并非所有.class1和.class2元素都具有相同的原始显示属性,我希望它们保留它.

如何使用not()属性或其他方式从规则中排除多个类？

我为我的项目创建了一个CSS样式表.有什么办法可以创建一个适用于所有表元素的css规则除了属于"dojoxGrid"类的表元素外？就像是:

.not(dojoxGrid) table{
    width:100%;
    border-top:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    margin:1em auto;
    border-collapse:collapse;
}

我有这个布局:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

使用这些CSS规则:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute; …

我很难弄清楚为什么下面的代码在Safari中呈现蓝色,但在Chrome和Firefox中呈现红色.

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

https://jsfiddle.net/hzcLpf9L/

显然,Chrome和Firefox似乎不支持:not()其中包含多个级别的CSS选择器.(可能的错误？)

我非常喜欢:not()选择器,我使用Safari开发,因此当我在Chrome上发现我的网站时,我几乎心脏病发作.任何解释为什么这种奇怪的行为发生将受到高度赞赏.

这两个选择器有什么区别？

input:not([type="radio"][type="submit"])
input:not([type="radio"]):not([type="submit"])

是否会选择<input>没有type属性的标签？

我读了:

• Css伪类输入:not(禁用)not:[type ="submit"]:focus

• CSS:多个属性选择器

更新：这可能是不可能的。我仍在寻找解决方案。

我需要创建一个CSS选择器来选择所有页面元素，使用*这些.exception元素将排除元素及其所有后代（！）。此.exception元素及其后代需要保留其初始样式，而*样式应应用于所有其他页面元素。

重要说明：如果首先将任何样式应用于.exception及其子代，然后我需要手动将其覆盖为其初始值，则解决方案不好！我根本不想对.exception和/或其后代应用任何样式！

所需结果

请记住，这只是一个简单的例子。我需要在其中应用解决方案的页面包含更多元素，因此我需要用于过滤元素的通用解决方案。在那里无法进行手动选择和覆盖元素。

http://jsfiddle.net/zV5gf/2/（初始状态，无解决方案）

解决方案：not选择器-不完美

此解决方案不够好，因为它将排除li.exception，但不会排除其后代。li.exception后代的初始样式将丢失。

http://jsfiddle.net/zV5gf/3/

*:not(.exception){
    background-color:orange !important;
}

并且div.exception及其后代的逻辑解决方案不起作用（浏览器不支持）：

*:not(.exception *){
    background-color:orange !important;
}

我使用选择器来选择没有一个类的所有元素:

.list th:not(.foo) {
  /* some rules */
}

如何将其应用于多个课程？

.list th:not(.foo), .list th:not(.bar) {
  /* some rules */
}

上面的CSS当然不会这样做,我需要像这样的伪:

.list th:not(.foo and .bar)

CSS中有可能吗？

我在元素上组合了三个类

base, base_green, base_blue  

我用这个只为base班级添加悬停效果(没有base_green)

.base:not(.base_green):hover {
    background-color: #E2E2E2;
}

我怎么能用两个班级来实现呢？
意思是,如果元素有,base base_green或者base base_blue不添加悬停效果,
例如.像这样的东西(不起作用)

.base:not(.base_green):not(.base_blue):hover {
    background-color: #E2E2E2;
}

编辑:
谢谢大家的答案,我的初步解决方案工作正常
我:not在我的CSS文件/ facepalm中的选择器连接香肠中有一个错字

我会留下问题,也许有人发现它很有用

我正在尝试将css应用于特定类中的所有跨度但排除其中一些,但以下代码不起作用:

.basket-items li span:not(.name,.count){border:solid 1px #ddd; border-radius:50%;}

我一直都:not喜欢这样:not(:empty).它不接受CSS课程吗？

这是html:

<ul class="basket-items">
    <li>
          <span class="ion-android-close"></span>
          <span class="name"></span>
          <span class="ion-plus"></span>
          <span class="count"></span>
          <span class="ion-minus"></span>
    </li>
</ul>

PS:请注意,在这里排除类意味着产生与类似问题不同的结果:我可以有多个:not()选择器吗？