Почему этот стиль не наследуется?

Question

Если у меня есть этот HTML

<table class="actList">
    <tr>
        <th> a </th> <th> a </th> 
    </tr>
    <tr>
        <td> a </td> <td> a </td> 
    </tr>
</table>

и этот css

.actList { 
   background-color: rgb(235, 239, 249); 
   width: 100%;
}

th.activity, th.actList { 
   text-align: left; 
   font-weight: normal; 
   padding: 0.4em 1em 0.4em 0.3em; 
}

Тогда я ожидал бы, что последняя строка означает, что все <th> в таблице с class="actList" получат этот стиль. Но это не так, как видно здесь

http://jsfiddle.net/littlesandra88/k3Bv5/

Как будет выглядеть правильный CSS для th.actList?

Можно ли это сделать, не добавляя класс к каждому <th>?

Answer 1

th.actList означает любые элементы th с классом actList.

В вашем примере этот элемент есть только у элемента таблицы.Классы не наследуют!

Я подозреваю, что вы ищете, это

.actlist th {...}

Обновление скрипки: http://jsfiddle.net/k3Bv5/3/

Answer 2

Я полагаю, вы пытаетесь нацелиться на th s в пределах .actlist, и в этом случае вам нужно: .actlist th в качестве селектора CSS, см. Ниже:

Пример

Answer 3

th.actList означает «A th, который является членом actList»

Вы хотите: «A th, который является потомком члена actList»

.actList th

Answer 4

Вы объявляете .actList на <table>, поэтому ваш CSS должен быть table.actList th

Answer 5

В настоящее время ни к одному из ваших тегов th не применен класс .actList.

Если вы хотите нацелиться на th внутри таблицы с классом .actList, тогда вы можете просто сделать:

.actList th{ /* styles */}

Answer 6

Изменение: th.activity, th.actList { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

To: th.activity, .actList th { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

th.actList означает, что это правило будет применяться к элементам th, которые имеют class = "actList".Вы хотите применить правило к элементам th внутри класса "actList", поэтому для этого вам нужно .actList th