Question

我是编码新手，而且我有一些noob问题...

每当我在我的HTML文件中设置我的元素时（style =＆＃34; ...＆＃34;）一切正常，但当我以正确的方式执行时，即我给他们一个类并将它们设置为样式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文件都在头部区域内链接（它是一个正在运行的网站），所以问题必须在其他地方......

Answer 1

你的CSS代码和HTML看起来很好，可能你应该检查你的HTML文件的head部分，如果你没有将你的CSS文件包含在你的HTML文件中，那么下面的代码将帮助你做到这一点。

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

提示：请确保正确指定style.css的位置，如下所示

href="location/style.css"

Answer 2

你可以这样做：

<head>
      <link rel="stylesheet" type="text/css" href="foldername/style.css">
    </head>

Answer 3

解决！在我的CSS中，在.miniclass之前我还指定了父类，所以现在它看起来像这个

        .highlight p .miniflag {
        padding: 2px;
        background-color: white;
        width: 35px;
    }

它完美无缺。不过，我不明白为什么我不能把它放在.miniclass之下，因为我认为特定的类属性总是被称为泛型类属性。

Answer 4

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

但是，我不明白为什么我不能把它放在.miniclass之下，因为我认为特定的类属性总是被称为泛型类属性。

您是对的，特定的类属性将覆盖泛型类属性。但我认为你很困惑哪个是：

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

将应用更具体的一个。

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

.miniflag {
    color: red;
}

.miniflag {
    color: blue;
}

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

CSS类选择器不起作用

4 个答案: