Question

我需要将样式应用于所有子div中的文本，但具有span类.fa

的除外

＆＃13;

.parentDiv > .column :not(.fa) {
  font-weight: bold
}

＆＃13;

<div class="parentDiv">

  <div class="column">aaa</div>
  <div class="column">bbb</div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

＆＃13;

我确实需要将CSS保留在一行中，因为它是较大样式表的一部分。我该怎么做？

Answer 1

执行此操作的唯一方法是使用

.parentDiv > .column { font-weight: bold }
.parentDiv > .column > .fa { font-weight: normal }

Answer 2

您可以将:not与:last-of-type

一起使用

段

＆＃13;

.parentDiv > .column:not(:last-of-type) {
  font-weight: bold;
  color:red;
}

＆＃13;

<div class="parentDiv">

  <div class="column">aaa</div>
  <div class="column">bbb</div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

＆＃13;

编辑基于@Oriol的评论

:not(:last-of-type)并不意味着＆＃34;不包含.fa

如果您的代码可能是动态的，那么这是有意义的。

这是另一种方法：

段

＆＃13;

.parentDiv > .column span:not(.fa) {
  font-weight: bold;
  color: red;
}

＆＃13;

<div class="parentDiv">
  <div class="column">
    <span class="gsdfasd">text</span>
  </div>
  <div class="column">
    <span class="faadsasfa">some text</span>
  </div>
  <div class="column">
    <span class="fa">this will NOT BE red</span>
  </div>
</div>

＆＃13;

Answer 3

not()选择器的工作方式是您必须定位特定的元素/类/ ID。您必须将span中每列的文字换行，然后将:not(.fa) CSS添加到span：

＆＃13;

.parentDiv > .column span:not(.fa) {
  font-weight: bold
}

＆＃13;

<div class="parentDiv">

  <div class="column">
    <span>aaa</span>
  </div>
  <div class="column">
    <span>bbb</span>
  </div>
  <div class="column">
    <span class="fa">ccc</span>
  </div>

</div>

＆＃13;

选择具有特定类的最后一个元素

3 个答案:

段

段