CSS类优先级 [英] CSS class priorities

问题描述

我有一个关于CSS类在遇到今天的问题后的优先级的问题。情况如下：

I have a question about the priority of CSS classes after encountering a problem today. The situation is as follows:

我有一个无序列表，它有一个类关联。 LI 标签也有一些样式定义。我想在点击（通过添加的选择的类）后更改 LI 添加的类的样式从不应用。这是正常的行为还是这段代码应该工作？

I have an unordered list which has a class associated with it. The LI tags have some styles defined too. I want to change the styling of the LIs after a click (via an added "selected" class), but the added class's styles are never applied. Is this normal behavior or should this code work?

CSS：

.dynamicList
{
    list-style: none;
}

.dynamicList li
{
    display: block;
    width: 400px;
    height: 55px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    background-color: #ff0000;
}

.selectedItem
{
    background-color: #0000ff;
}

HTML：

<ul class="dynamicList">
  <li>First Item</li>
  <li class="selectedItem">Second (Selected) Item</li>
</ul>

选择的背景颜色列表项未更改。这也是如果我不应用样式到 LI 元素的情况，但创建另一个类并应用于所有列表项，因此它读取..

The background color of the "selected" list item isn't changed. This is also the case if I don't apply the style to the LI element, but create another class and apply that to all the list items so it reads..

<li class="listitem selectedItem">xxxx</li>

推荐答案

这听起来像 CSS specific 问题。尝试将 .selectedItem 规则集更改为：

This sounds like a CSS specificity problem. Try changing your .selectedItem ruleset to:

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

这篇关于CSS类优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！