将更改的属性设置为 span

Question

我的页面上有 20 个跨度，我更改了这个跨度的样式，但我不想在 div 中应用到其中一个跨度。我想将此跨度属性设置为除 div 和 id="no" 中的跨度之外的所有跨度，同时此跨度保持默认值 css。我该怎么做？

这是我的 html:

<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>

<div id="k">
   <span>Hi ...</span>
</div>

<div id="no">
     <span>Hi ...</span>
</div>

这是我的风格：

span{
     display:block;
     font-size:20px;
}

编辑：我还希望 id="k" div 的跨度与 id="no" div 的跨度相同.

Answer 1

您可以使用 :not() 伪 class 和直接后代组合器 >:

的组合

:not(#k):not(#no) > span { /* Match all spans that are NOT children of */
  display:block;           /* elements having IDs #k and #no           */
  font-size:20px;
}

值得注意的是:not() is supported in IE9+.

:not(#k):not(#no) > span {
  display:block;
  font-size:20px;
}

<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>
<span>Hi ...</span>

<div id="k">
   <span>Hi ...</span>
</div>

<div id="no">
     <span>Hi ...</span>
</div>

Answer 2

父项是什么？如果它是具有特定 class 的 div 你可以做

.parent-class > span {
     display:block;
     font-size:20px;
}

如果它是正文、元素或带有 id 的东西，也是如此。

在css > 是直子selector。具有 x > y 的规则将仅 select 与 y 匹配的元素，这些元素是 x 的直接子元素。因此，您可以使用#id-parent > p，它只会 select p 个元素，这些元素是具有 id="id-parent" 的元素的直接子元素，或者您可以使用 p > .class-child这只会 select 具有 class='child-class' 的元素，它们是 p 元素的直接子元素。

其中的一个例子：

<div id="id-parent">
  <p> <!-- This will be matched by #id-parent > p -->
    Some text
    <div>
      <span class="class-child"> <!-- This won't be matched by p > .class-child -->
          A span
       </span>
    </div>
  </p>
  <div id="id-child">
    <p> <!-- This will be won't be matched by #id-parent > p -->
       Some more text
       <span class="class-child"> <!-- This will be matched by p > .class-child -->
          A span
       </span>
    </p>
  </div>
</div>

Answer 3

为什么不类？

<span class="some-class">Hi ...</span>
...
<span class="some-class">Hi ...</span>

<div id="k">
  <span class="some-class">Hi ...</span>
</div>

<div id="no">
  <span>Hi ...</span>
</div>

.some-class {
   ...
}

将更改的属性设置为 span

Set changed properties to spans

html

css

css-selectors