Question

尝试选择除一个子div内的标签之外的元素内的所有标签。尝试了两种方法，但似乎没有任何工作

.parentDiv *:not(.skipLabelsParent) label {
    display: inline-block;
    margin-bottom: 12px;
}

这是失败的，因为*选择所有父母，包括skipLabelsParent类的子元素和内部标签的父元素。

.parentDiv label:not(.skipLabelsParent label) {
    display: inline-block;
    margin-bottom: 12px;
}

我不确定为什么会失败。

除此之外的任何解决方案？

fiddle此处

小提琴只是一个例子。不要把它作为最后的案例。标签可以在任何地方和任何级别。我只想跳过每个skipLabelsParent类。我在我的网站上做得很清楚题。请再次阅读问题并提供通用解决方案。否则，我会寻找其他方法。

Answer 1

我认为它不起作用，因为您无法在:not http://caniuse.com/#search=%3Anot

中链接选择器

https://developer.mozilla.org/en/docs/Web/CSS/:not

目前，您只能使用“简单选择器”

https://drafts.csswg.org/selectors-3/#simple-selectors

这适用于例如：

HTML：

<div class="parentDiv">
  <label>Pnoe</label>
  <div>
    <label class="skip">Pnoe</label>
    <label class="skip">Pnoe</label>
    <div>
        <label class="skip">Pnoe</label>      
    </div>
  </div>
</div>

CSS：

.parentDiv label:not(.skip) {
  color: red;
}

https://jsfiddle.net/gjaozryL/19/

而这个选择器一起打破了：

HTML：

<label>Pnoe</label>
<div class="parentDiv">
  <label>Pnoe</label>
  <div>
    <label class="skip">Pnoe</label>
    <label class="skip">Pnoe</label>
    <div>
        <label class="skip">Pnoe</label>      
    </div>
  </div>
</div>

CSS：

label:not(.parentDiv .skip) {
  color: red;
}

https://jsfiddle.net/gjaozryL/20/

Answer 2

我觉得做你想做的最简单的方法就是用一个好的选择器对你想要跳过的标签进行一些智能的重新设计：

context.Routes.MapHttpRoute("AreaName_WebApiRoute",
    "AreaName/Api/{controller}/{id}",
    new { id = RouteParameter.Optional });

并使用该选择器设置子div的样式。这将是最少的工作量。

接下来，根据我们所讨论的标签数量，将该类直接添加到您要跳过的标签中，以便以下代码跳过.parentDiv .skipLabels{/*your css here*/)的类<label> }}：

.skipLabels

如果这不适合你，那么我认为你应该在父div下覆盖子div的样式：

.parentDiv label:not(.skipLabels) {
    display: inline-block;
    margin-bottom: 12px;
}

这样，你可以将.parentDiv{ display: inline-block; margin-bottom: 12px; } .skipLabels{ display: .....; margin-bottom: ....; }类放在任何地方，你就会知道样式会像你想要的那样生效。

Answer 3

在CSS中，您可以定义

.parentDiv > label{
  color: red;
}

感谢＆＃34;＆gt;＆＃34; -operator，只选择之前直接元素子元素的元素。在您的情况下，只有第一个标签＆＃34; Pnoe＆＃34;。

Answer 4

鉴于这个嵌套的div / label片段：

div:not(.skipme) > label {
  color: red;
}

<div class="parentDiv">
  <label>Pnoe</label>
  <div>
    <label>Pnoe</label>
    <label>Pnoe</label>
    <div>
      <label>Nested Phoe</label>
    </div>
  </div>
  <div class="skipme">
    <label>skip me</label>
  </div>
  <div class="somediv">
    <label>Phoe</label>
    <div class="another-div">
      <label>Phoe</label>
    </div>
  </div>
</div>

选择元素内的所有标签，但在一个div内

4 个答案: