仅适用于css直接子女

Question

我了解到>只会将css应用于直接子女。但是我无法在我的情况下使用它。

我有HTML作为

table[id="tbl"] div div > span { 
 
    font-weight: bold 
 
}

<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div> 
 
      <span> 
 
      outer span 
 
      <div> 
 
      <span> 
 
      inner span 
 
      </span> 
 
     </div> 
 
     </span> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

我要让外跨度大胆所以我写CSS如下

table[id="tbl"] div div > span { 
    font-weight:bold 
} 

，但我的两个跨度以粗体未来。我必须在不更改html的情况下执行此操作，只是出于某种原因使用css或jQuery。

Answer 1

内部元素获取继承样式规则。因此，你需要重写你的内部元素。此外，只需使用id选择器而不是属性选择器。

#tbl div div > span { 
    font-weight:bold; 
} 

#tbl div div > span span{ 
    font-weight:normal; 
} 

Answer 2

请尝试它的工作完美

#tbl div div > span { 
 
    font-weight: bold; 
 
} 
 
#tbl div div > span span { 
 
    font-weight: normal !important; 
 
}

<table id="tbl"> 
 
    <tr> 
 
    <td> 
 
     <div> 
 
     <div> 
 
      <span> 
 
      outer span 
 
      <div> 
 
       <span> 
 
       inner span 
 
       </span> 
 
      </div> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

也许你应该考虑重组你的HTML呢？您正在嵌套div s在spans等内部，这在HTML中是不允许的（请参阅What elements can a span tag contain in HTML5?了解更多详情）。

一个不那么复杂的树使得编写CSS更容易，而且你不太容易将自己绘制到复杂CSS表达式的角落，在这些角落中更改最小的事物可能会破坏一切。

向您的HTML元素添加类也可以更容易地设置样式，甚至可能具有更好的性能（有关CSS性能的一些提示，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS）。