从全球的造型

Question

我设置列表项的风格，像这样不计的ID：

ul.list li { 
    background: #FFFFFF; 
    padding: 0 5px 0 5px; 
    height: 20px; 
} 

ul.list li:hover { 
    background: #F7F7F7; 
} 

但我想定义一个特殊列表项的列表的标题只是它继承了先前定义的样式太。我知道我可以给一个班的上述造型，但感觉很麻烦。我是否必须手动“撤消”特殊列表项目的所有内容或给上述样式设置类？还是有更好的方法来做到这一点？也许我不应该为标题使用列表项目？

ul.list li.header { 
    font-size: 16px; 
    font-weight: bold; 
} 

Answer 1

如果列表的标题必须在名单内，我可能只是（你提到）“手动撤消”他们：

ul.list li.header { 
    font-size: 16px; 
    font-weight: bold; 

    background: transparent; 
    padding: 0; 
    height: auto; 
} 

它不是那么糟糕。

---

如果你只需要支持modern browsers，你可以这样做：

.list li:not(:first-child) { 
    background: #FFFFFF; 
    padding: 0 5px 0 5px; 
    height: 20px; 
} 
.list li:first-child { 
    font-size: 16px; 
    font-weight: bold; 
} 

.list li:hover { 
    background: #F7F7F7; 
} 

这消除了任何类的需求（尽管你可以用.header取代:first-child如果你想保持这一类）。

Answer 2

如果你是自由地使用先进的CSS3选择器，你可以使用:not()选择：

ul.list li:not(.header) { 
    background: #FFFFFF; 
    padding: 0 5px 0 5px; 
    height: 20px; 
} 

否则，你就得手动覆盖它们。