相关疑难解决方法(0)

这让我疯狂:

HTML:

<div><h1>Hello World!</h1></div>

CSS:

*:not(div) h1 { color: #900; }

这不是读",选择所有h1具有祖先不是div元素的元素......？" 因此,"你好世界!" 不应该是红色的,但它仍然是.

对于上面的标记,添加子组合器有效:

*:not(div) > h1 { color: #900; }

但h1如果元素不是元素的子元素,则不会影响div元素.例如:

<div><article><h1>Hello World!</h1></article></div>

这就是为什么我想将h1元素表示为元素的后代而不是子div元素.任何人？

我有这个布局:

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

我很困惑为什么这个例子不起作用:

CSS:

p {
  color: red;
}

div:not(.exclude) p {
  color: green;
}

HTML:

<div>
  <div class="exclude">
    <p>I should be red</p>
  </div>
  <div>
    <p>I should be green</p>
  </div>
</div>

最终的结果是两者<p>都是绿色的,但我预计第一个是红色的.这是一个JSFiddle.

有趣的是,我找到了三种不同的方法来使它工作:

1. <div>从HTML中删除顶级
2. 将顶级更改<div>为其他元素(例如<section>)
3. div在第二个CSS选择器的开头添加一个额外的(div div:not(.exclude) p)

另一个奇怪的方法来打破它:

4. 使用溶液2为基础,包裹另一个<div>围绕<section>

据MDN称:

此选择器仅适用于一个元素; 你不能用它来排除所有的祖先.例如,body :not(table) a仍将应用于表内的链接,因为<tr>它将与:not()选择器的部分匹配.

这是有道理的,但我认为这不会发生在这里.由于它<div class="exclude">和它的直接子之间没有任何东西<p>,它应该触发规则而不管它嵌套在里面.我错过了什么？如果有人能帮助我理解这一点,我真的很感激.

我有一个类似的文件

<div>
 <div class="abc">
  <div>
   <!--some more divs inside-->
  </div>
 </div>
</div>

我想要做的是仅将样式应用于第一个div.我试图用div:not(.abc, .abc *),div:not(.abc):not(.abc *),div:not(.abc), div:not(.abc) *但这些都不奏效.编辑html会很困难,因为要编辑的文件很多.此外,上面显示的代码出现在不同的地方,因此使用>选择器不是解决方案...有人知道如何做到这一点？

以下是CSS3 :not()伪类的官方文档:
http://www.w3.org/TR/css3-selectors/#negation
和CSS Selectors Level 4增强功能:http:
//dev.w3.org/csswg/selectors4 /#否定

我一直在寻找实现和浏览器支持:not(),但我发现的唯一例子是单个元素或元素的直接子元素,例如:

div *:not(p) { color: red; }

上面的例子适用于<p>直接的孩子<div>,但是当它<p>是一个更遥远的后代时它不起作用<div>.

div :not(p) {
    color: red;
}

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

如果答案在上面的官方文档中,那么我没有找到/理解它.正如我所说的,我搜索了这个网站和网站,但找不到任何关于支持或缺乏的讨论:not()作为另一个元素的孙子.

这应该像我认为的那样工作吗？