Question

我正在设置列表项的样式，如下所示：

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;
}

这消除了对任何类的需要（但如果你想保留该类，可以用:first-child替换.header。）

Answer 2

如果您可以自由使用高级CSS3选择器，则可以使用:not()选择器：

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

否则，您只需手动覆盖它们。

从全局样式中排除ID

2 个答案: