Question

我的页面上有20个跨度，我改变了这个跨度的风格，但我不想在div中申请其中一个。我想将此span属性设置为除了id="no"的div中的span之外的所有跨度，而此span保持默认的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

父母是什么人？如果它是具有特定类的div，则可以执行

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

如果是身体，或元素或具有id的东西，也是如此。

在css＆gt;是直接子选择器。 x>的规则y只会选择匹配y的元素，它们是x的直接子元素。所以你可以拥有＃id-parent＆gt; p只会选择p元素，这些元素是id =“id-parent”的元素的直接子元素，或者你可能有p＆gt; .class-child只会选择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 2

您可以使用:not()伪类和直接后代组合>的组合：

: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 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 {
   ...
}

将更改的属性设置为跨度

3 个答案: