對CSS文件中項目的引用

Question

我的HTML中有多個不同的“項目”類。 現在，我想分別為我的兩個類別ID分別設置“項目”的樣式，但是以某種方式所有“項目”都應用了相同的CSS。 我嘗試了不同的類和不同的ID，但沒有任何效果。 我所有的“項目”都具有“ loaded-layout”（= 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一個空格，因為您正在尋找一個帶有class item的孩子 ，否則它正在尋找一個ID為.item loaded-layout或carousel-articles的.item ：

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

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

Answer 2

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

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

http://jsfiddle.net/k52eerfv/