Question

我的HTML中有多个不同的“item”类。现在我想为我的两个类别ID分别设置我的“项目”样式，但不知何故所有“item”都应用了相同的CSS。我尝试了不同的类和不同的ID，但没有任何作用。我的所有“项目”都有“加载布局”（= ID）CSS样式。

<div class="base-container">
        <div class="carousel slide" id="carousel-articles">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4 col-sm-6"></div>

                    <div class="item"></div>

                    <div class="item"></div>

                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

和

<div class="masonry" id="loaded-layout">
     <div class="container">
            <div class="item">
                <div class="well"></div>
            </div>

            <div class="item">
                <div class="well"></div>
            </div>

            <div class="item">
                <div class="well"></div>
            </div>
        </div>
    </body>
    </html>

我的CSS：

#loaded-layout.item {
    width:350px;
    height:auto;
    font-size:11px
}

#carousel-articles.item {
color:#01DF01;
background:#01DF01
}

Answer 1

您需要在这些选择器之间留出空格，因为您正在寻找具有类item的子，否则它正在寻找ID为{{.item的{{1}} 1}}或loaded-layout：

carousel-articles

Answer 2

#loaded-layout .item {
    width:350px;
    height:auto;
    font-size:11px
}

#carousel-articles .item {
color:#01DF01;
background:#01DF01
}

http://jsfiddle.net/k52eerfv/

引用CSS文件中的项目

2 个答案: