僅適用於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）。