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

和

。金{ 颜色：＃CCFF00;

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

Answer 3

如果黄金只适用于这些李，你可以直接写：

.gold{
    color:red;
}

其他

#tabs li.gold {
   color:red;
}

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

3 个答案: