Получение атрибутов для прохождения через детей

Question

Я хочу смоделировать вкладки так, чтобы первое слово в записи списка всегда получало фиксированную ширину. Я делаю это так:

<style>
.tabbed { float: left; width: 5em; }
</style>

<ul>
<li><span class='tabbed'>first</span> entry in my list</li>
<li><span class='tabbed'>second</span> list entry</li>
</ul>

подход работает относительно хорошо, за исключением того, что если я хочу сделать:

li { color: blue }

применяется цвет (не удивительно) к <li>, но не к <span>. это значит, что мне придется:

.tabbed { color: blue }

что не очень сухо. В моем случае у меня есть целая куча объявлений для разных классов элементов списка, так что это громоздко и безобразно.

как с этим справиться?

Answer 1

По умолчанию span должен быть окрашен в синий цвет, если li окрашен в синий.

См. http://jsfiddle.net/Q2UGE/ для примера

Я думаю, вы должны иметьнекоторые другие CSS, переопределяющие его

Если у вас есть что-то, переопределяющее его, которое вы не можете изменить, вы также можете принудить li .tabbed наследовать от него родительский

li .tabbed { color: inherit }

См. http://jsfiddle.net/Q2UGE/1/ для примера этого

Answer 2

li, .tabbed { color: blue }

это немного более сухо.

Answer 3

Как это:

li, .tabber { color: blue }

Answer 4

Вы не можете на самом деле.Лучшее, что ты мог сделать, это ...

li,
.tabbed { 
    color: blue 
}