让属性渗透到孩子身上

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, .tabbed { color: blue }

那更干一点。

Answer 4

像这样：

li, .tabber { color: blue }