jquery - CSS无法访问jQuery选项卡中列表项中的类

Question

这是我的 html 代码：

<div id="tabs">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#about">About Me</a></li>
        <li class="gold"><a href="#book">All About Love</a></li>
        <li class="gold"><a href="#fashion">Fashion Corner</a></li>
    </ul>

请注意，我class="gold"在最后两个中有一个li

现在我想改变这个类的颜色，所以我尝试了：

#tabs li .gold{
    color:#CCFF00;
}

和

.gold{
    color:#CCFF00;
}

但他们都没有工作。请帮助我并解释一下，为什么这些代码不起作用。

供您参考，#tabs li选择器运行良好。

感谢您的帮助：D

Answer 1

摆脱你的类和相应元素之间的这个空间，记住阅读代码的层次结构对你的浏览器很重要，如果它们匹配相同的选择器，后面的语句会覆盖前面的一次。

<style>
#tabs li a {
   /*here you style your anchor*/
    color: #CC0000;
}

#tabs li.gold a {
    /*here you style the golden one after the standard is given above */
    color: #CCFF00;
}

#tabs li { 
    /*here you would style your text inside li,
      but not the anchors inherited styling from the browser */
} 
</style>

Answer 2

您需要更改为

#tabs li.gold{
color:#CCFF00;
}

和

.gold{ 颜色：#CCFF00;

它工作正常。试试这个http://jsfiddle.net/rajeswarik/FaKv5/1/

Answer 3

如果 gold 只适用于这些 li 的，你可以直接写：

.gold{
    color:red;
}

别的

#tabs li.gold {
   color:red;
}