Применить 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-элементы также может облегчить его стиль и, возможно, даже повысить производительность (см. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS для некоторых подсказок к производительности CSS).