Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
679 views
in Technique[技术] by (71.8m points)

list - CSS class priorities

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

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>

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...