为什么我的 CSS 不适用于我的 html 代码？

Question

我试图解决这个问题，但我仍然被这样的错误阻止，哈哈。 我不明白为什么我的 CSS 不适用于我的 HTML 元素。

a{
	text-decoration: none;
}

.test{
	text-decoration: none;
}

<a href="#" class="test">
	        <div id="blue-card" class="card h-150">
	          <div class="card-body">
	          	<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
	          	<p class="sub-info-card">Utilisateurs actifs</p>
	          </div>
	        </div>
        </a>

我首先尝试只使用 CSS 中的应答器，但在它不起作用后，我尝试使用“测试”类。但是还是不行。

我页面的其他 CSS 工作正常。它只是在我的应答器上..

如果有人知道如何解决我的问题，请！

谢谢，

Answer 1

从您最初的帖子中并没有立即明确到底发生了什么显示问题。但是在您的 cmets 中，您表示出现了不需要的文本装饰，大概是在其中一个 html 元素中。您最初的帖子似乎显示了您通过在 style.css 表中重新定义 a 元素的 css 来纠正不受欢迎的装饰的最初努力，该 css 旨在覆盖引导 css。

但您的问题似乎与哪个 css 最特定于正在显示的元素有关。样式越接近元素，其优先级越高。

a 元素中的每个 html 元素都有应用到它们的类 "card h-150","card-body","info-card","sub-info-card"。有很多类需要整理。

<a href="#" class="test">
            <div id="blue-card" class="card h-150">
              <div class="card-body">
                <p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
                <p class="sub-info-card">Utilisateurs actifs</p>
              </div>
            </div>
        </a>

这些类的交互方式将优先于您的 a 定义，因为它们更具体，换句话说，更接近元素。

尝试通过使用text-decoration: none!important 之类的覆盖重新定义a 元素来纠正问题肯定会奏效，但这不是一个好的做法（see first answer here）。您应该仔细查看 html 元素中调用的类的作用。如果这些类不是您需要的，请使用不同的类，或者这可能是您在 style.css 中编写自己的自定义类的好机会。但是，如果您刚刚开始熟悉 css，编写自己的课程可能会很有挑战性。从引导程序中找到您真正想要的课程可能会更好。这就是 bootstrap 的价值。

要回答您最初的问题（基本上是why doesn't your css apply to your html elements），这是因为在元素上应用了一个类并且优先。 CSS 的特殊性很棘手，一开始很难学习。请参阅同一篇文章中提到的in this post 和this link 的一些答案。

Answer 2

因此，您遇到的行为是未应用基于标签名称或类名称单独定义 CSS 规则，但是，如果您将 CSS 指定为属性值，则它会被应用。让我们一起思考：

标签名规则

a{
    text-decoration: none;
}

您有理由期望此规则适用于锚点，但事实并非如此。这显然意味着其他一些 CSS 规则（或 Javascript）会覆盖它。浏览器开发工具可以帮助您，只需右键单击页面上的任意位置，然后单击检查（或类似选项）。在开发工具面板中，您应该会看到一个元素选项卡，其中显示了 HTML，单击元素您应该会在右侧看到 CSS 规则，如下图所示：

因此，我建议您单击您希望应用规则的锚点，然后查看应用了哪些 CSS。您打算在此处指定的规则将被删除，因为具有更高优先级的东西会覆盖它（另一种情况是稍后评估具有相似优先级的规则并覆盖这个规则）。您应该能够看到应用了哪个text-decoration 规则，您可以轻轻地将鼠标悬停在该规则上并单击其复选框以暂时禁用它。这将启用在层次结构中具有第二优先级的属性上应用的规则，依此类推。这个过程还不是解决方案，它正在探索问题。经过这次探索，您将知道问题所在。

按类规则

.test{ 文字装饰：无； }

这种情况与上一节中描述的情况相似（由于更高优先级或相似优先级但在代码后面的规则覆盖），或者，可能由于某种原因testclass 被删除从标签。因此，在浏览器控制台的 Elements 选项卡中，您将看到该元素是否仍然具有该类。如果不是，则通过编辑标签并将该类写入其中进行试验，看看您的规则是否适用。如果标签有类，但规则不适用，那么我们会遇到与上一节中描述的问题类似的问题。

解决方案

最好的解决方案是找出问题所在，为什么还有其他规则应用于此元素并采取相应措施。现在，您可以应用类似

的规则

a.test#test {
    text-decoration: none;
}

当然也可以将 test 作为 id 添加到您的 tag，如下所示：

<a href="#" class="test" id="test">

如果这仍然不起作用，那么给你带来麻烦的另一条规则很可能是 !important。如果是这种情况，请尝试删除其他规则。如果这不是一个选项，那么看看另一个规则的选择器是什么，并确保你的标签的选择器与之相矛盾。

Answer 3

尝试如下访问锚标记的“链接”属性并将值设置为无，同时添加 !important ，这对我有用。

a:link {
text-decoration: none!important;
}