html - 引用 CSS 文件中的元素

Question

我的 HTML 中有多个不同的“元素”类。现在我想为我的两个类别 ID 中的每一个分别设置我的“元素”的样式，但不知何故所有“元素”都应用了相同的 CSS。我尝试了不同的类(class)和不同的 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 类的 child，否则它正在寻找 .item ID 为 loaded-layout 或 carousel-articles:

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

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