Question

CSS

#inchannel li{
            width:179px;
            height:40px;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            font-size:17px;
            color:#999999;
            background:url(img/green.png) no-repeat 8% 50%,url(img/back_line.png);

        }

        .ichn0{
            width:179px;
            height:123px;
            margin:0px 0px 0px 0px;
            padding:0px 0px 0px 0px;
            font-size:17px;
            color:#999999;
            background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;

        }

HTML

<ul id="accordion">

<li>
    <a href="#" class="item category" rel="category"></a>
    <ul id="inchannel">
    <li class="ichn0"><img src="facebook/41403_1434825607_37944358_q.jpg"></li>
        <li><img src="facebook/48983_615523712_8495_q.jpg"></li>
        <li><img src="facebook/41621_717814907_4472_q.jpg"></li>
    </ul>
</li>

</ul>

我想只对一个类应用css，但它不适用于一个类似乎inchannel css覆盖了所有类。任何人都能告诉我如何只在一个班级申请css吗？任何想法？谢谢。

Answer 1

使用更高的特异性

#inchannel li.ichn0{
        width:179px;
        height:123px;
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        font-size:17px;
        color:#999999;
        background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;

    }

Answer 2

#inchannel li有更多specificity类别.ichno。

有几种方法可以解决这个问题。

添加！important对.ichn0

这是不好的做法，因为你可以覆盖这样的用户样式表，用于屏幕阅读器之类的东西。

为第一个li添加ID。

这没关系，但不是我个人的方式。

#inchannel：第一胎

我就是这样做的。在我看来，这是最容易在多个页面中维护的。

根据Damen的答案添加课程。

这种方法也没有任何问题。我只是一个傻瓜：psuedo选择器。

Answer 3

#inchannel li - 适用于li元素中的所有#inchannel元素（在您的情况下，所有这些元素。
.ichn0 - 适用于li类的ichn0元素，无论它们在哪个元素内。只有其中一种。

第一个优先于.ichn0 CSS的原因是因为CSS specificity。 #inchannel li选择器更具体，因此会覆盖不太具体的.ichn0设置。

将.ichn0更改为#inchannel li.ichn0可以解决您的问题。

如何只在一个类上应用css？

3 个答案: