相关疑难解决方法(0)

我有这个布局:

<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很好,但我似乎无法想出这个.如果我有一个结构

<div>
    <h2 class="open">1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

如何使用.openCSS类来定位所有兄弟h2s ？我的主要问题是兄弟选择器(.open + h2)只会紧随其后的h2 .open.

假设我有以下HTML:

<div class="foo">
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div> <!-- not originally here -->
<div class="bar">
  <ul>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

我想选择所有li那些元素不具有类元素的后代foo.我知道我可以用一个花哨的过滤器功能来做到这一点,但我想知道我是否可以只使用一个选择器.首先我试过:

$(":not(.foo) li")

不幸的是,这不起作用,因为li有其他祖先没有风格(ul在这种情况下).以下似乎有效;

$(":not(.foo) :not(.foo) li")

换句话说,选择所有li没有祖先的元素,这些祖先具有类foo或者具有类的祖先foo.也许这是使用选择器执行此操作的最佳/唯一方法,但我对:not选择器的重复感到不满.还有更好的想法吗？

小提琴

我有一些像这样的嵌套元素:

<div class="foo">
    <div class="select-inside-this">
        <div class="not-inside-this">
            <div class="one select-this"></div>
        </div>
    </div>
</div>
<div class="select-inside-this">
    <div class="two select-this"></div>
</div>
<div class="three select-this"></div>

我想选择.select-this里面的所有内容,.select-inside-this而不是那些被包裹的内容.not-inside-this.所以最后,我应该只能two.select-this从上面的代码中选择.CSS我试过但没有用:

.select-inside-this :not(.not-inside-this) .select-this {
    /* style here /*
}

要么:

.select-inside-this *:not(.not-inside-this) .select-this {
    /* style here /*
}

这里有解决方法吗？

我不想在这里使用JavaScript.我需要纯CSS3解决方案.

编辑:我不想使用直接child(>)选择器.正如我所问,我想在没有异常包装的情况下从任何级别选择所有这些元素.

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

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>,它应该触发规则而不管它嵌套在里面.我错过了什么？如果有人能帮助我理解这一点,我真的很感激.

说明:

我不是CSS专家,但我目前的尝试就是这个.

div:not(.classToBeAvoid) *{
    background-color:red;
}

我用英文写的是...

"将红色背景应用于任何没有<div class="classToBeAvoid">祖先的元素".

但是,在我的测试中,它似乎不像这样工作.

CodePen:

https://codepen.io/anon/pen/eGVBVb

码:

<div class="classToBeAvoid">
  <div>
    <p>
      Shouldn't be a red background on any element around here.
    </p>
  </div>
</div>

<div>
 <p>
   Should be a red background
 </p>
</div>

div:not(.classToBeAvoid) *{
  background-color:red;
}

我有一个类似的文件

<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()作为另一个元素的孙子.

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

我想选择不是特定类的后代的跨度,让我们称之为"不".这是我的CSS:

div:not(.no) span{background-color:#00f;}

这是HTML

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

两个问题:

1. 为什么我的CSS适用于yes 1和no 2？

2. 如果切换到通用选择器,为什么整个事情会破裂？

   *:not(.no) span{background-color:#00f;}
   

   Run Code Online (Sandbox Code Playgroud)

这是JSFiddle中的代码:http://jsfiddle.net/stephaniehobson/JtNZm/

我需要在HTML文档的所有元素中设置文本样式,除了嵌套在特定类中的文本.我无法控制HTML,我只能修改CSS.

这是一段代码:

<div class="container">
  <div class="column c1">
    <div class="text">
      text in column 1
    </div>
  </div>
  <div class="column c2">
    <div class="text">
      text in column 2
    </div>  
  </div>
  <div class="column c3">
    <div class="text">
      text in column 3
    </div>  
  </div>
</div>

我希望除text元素中的元素之外的所有元素c1都是粗体.我事先并不知道可以有多少列.

我尝试过以下使用:not选择器的CSS ,但它渲染了所有粗体:

.container {
  display: flex;
}

.column {
  padding: 0 1em;
}

:not(.c1) .text {
  font-weight: bold;
}

为什么:not选择器不工作？我究竟做错了什么？ 这是一个尝试的jsfiddle.