Question

我有一个div，我需要将白色空间设置为＆＃34; no-wrap＆＃34;但是当我这样做时，所有的子元素都被设置为无包装并且它会使事情变得混乱。如何仅将样式应用于一个元素但不允许其他元素继承它？

这是做到这一点的方法：

#element {
   white-space: nowrap;
}

#element * {
   white-space: initial;
}

还是有更好的方法吗？我宁愿它只是一种风格宣言。

<div id="element"> 
   <div id="other1"><div>
   <div id="other2"><div>
   <div id="other3"><div>
   <div id="other..."><div>
   <div id="other100"><div>
</div>

我试图将这个应用于所有后代，而不仅仅是第一个子节点，因为其他类似的帖子提到但没有回答。

Answer 1

你不能这样做。
您必须覆盖所有样式，因为它们都具有inherit值。

您可以为您在问题中描述的所有元素制定规则：

#element {
    whitespace: nowrap;
}

#element * { 
    whitespace: initial;
}

但是，它可能会导致性能问题，因为它会将规则应用于每个元素。

避免继承的最简单方法是不要使用子元素，它可以继承此样式。只需将您的文字提取到另一个元素，这样它就没有子元素，只将white-space: nowrap;应用于它：

<div id="element"></div> <!-- white-space: nowrap (CSS rule) -->

<div id="other1"><div> <!-- white-space: normal (default) --> 
<div id="other2"><div>
<div id="other3"><div>
<div id="other..."><div>
<div id="other100"><div>

而不是

<div id="element"> <!-- white-space: nowrap (CSS rule) -->
    <div id="other1"><div> <!-- white-space: nowrap (inherited)--> 
    <div id="other2"><div>
    <div id="other3"><div>
    <div id="other..."><div>
    <div id="other100"><div>    
</div>

Answer 2

如果有许多子元素，我会考虑在子元素中添加一个包装元素（以免用类膨胀标记）......就像这样：

   <div id="element"> 
      <div class="wrapReset">
         <div id="other1"><div>
         <div id="other2"><div>
         <div id="other3"><div>
         <div id="other..."><div>
         <div id="other100"><div>
     </div>
  </div>

使用：

#element {
   white-space: nowrap;
}

#element .wrapReset {
   white-space: normal; /* 'normal' is the initial value for white-space */
}

但是，如果只有少数子元素，我宁愿为子元素添加一个类。像这样：

<div id="element"> 
   <div class="wrapReset" id="other1"><div>
   <div class="wrapReset" id="other2"><div>
</div>

使用CSS（与上面相同）

#element {
   white-space: nowrap;
}

#element .wrapReset {
   white-space: normal;
}

实际上，像'wrapReset'这样的类实际上可能是使用！important的一个很好的候选者（并且可以在上面的两个例子中应用）

像这样：

.wrapReset {
   white-space: normal !important;
}

如何使CSS样式不被继承到后代？

2 个答案: