html - CSS 类选择器不起作用

Question

我是编码新手，遇到一些菜鸟问题...

每当我在我的 HTML 文件中设置我的元素样式时 (style="...") 一切正常，但是当我以正确的方式进行时，即我给它们一个类并在 CSS 文件中设置它们的样式时，它赢了根本没用。

这是我的 HTML:

<div class="4u 12u(mobile)">
    <section class="highlight">
        <a href="football.html">
            <span class="image fit"><img src="images/pic02.jpg" alt=""></span>
            <header>
                <h2>Football</h2>
                <p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
            </header>
        </a>
    </section>
</div>

这是我的 CSS，我试着给它们四周留出 6px 的边距:

.miniflag {
        margin: 6px 6px 6px 6px;       
    }

你能帮我找出问题所在吗？非常感谢!

编辑:是的，我的 HTML 和 CSS 文件都链接在 head 部分(这是一个正在运行的网站)，所以问题一定出在其他地方......

Answer 1

作为对您自己的解决方案的回答:很可能您有另一段 CSS 覆盖了您的 .miniflag CSS。

Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

你是对的，一个特定的类属性将覆盖一个通用的类属性。但我认为您对哪个是哪个感到困惑:

• .miniflag : 通用类属性，最低级别
• .highlight p .miniflag : 更具体的类属性，有3个等级

将应用更具体的一个。

此外，CSS 规则的位置也很重要:

.miniflag {
    color: red;
}

.miniflag {
    color: blue;
}

这会将颜色设置为blue，因为应用了最后一条规则并覆盖了之前的规则。