我把这个内联样式在头部或外部样式表?

Question

我有一个a.nav-link.active元素

我试过了，但是没有用

a.nav-link.active {
background-color: rgb(0, 0, 0);
}

<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">

Answer 1

问题1:为什么不工作?

问题是<a>里面没有内容，也没有结束标签。

固定的片段:

a.nav-link.active {
background-color: rgb(0, 0, 0);
}

<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">Link</a>

问题2:它应该在文件还是头文件中?

那真的取决于你。两种方法都是一样的。

Answer 2

问题是:

您的链接标签<a>没有内容。默认情况下，链接标签是内联元素，这意味着它们只需要显示它们所需的宽度和高度。因此，没有内容意味着元素是无宽度和无高度的。要解决这个问题，您需要将link元素定义为inline-block元素或block元素(如果您不希望它在水平位置与其他元素相邻)，并为其设置宽度和高度。

解决方案:

将<a>定义为inline-block元素:

a.nav-link.active {
display: block;
width: 50px;
height: 50px;
background-color: rgb(0, 0, 0);
}

同时，确保您关闭了<a>标记:

<a href="consulta_relatorio.html" 
class="nav-link active" 
aria-current="page" 
style="background-color:rgb(0, 0, 0);">
</a> 

最后，请记住，内联样式(style="...")将覆盖通过类应用的样式。

Answer 3

是否保留内联样式?你的标签中的样式属性将优先于你的标签，但即使如此，我做了一个小的测试HTML文件与相同的，它似乎工作得很好，但没有颜色将显示。如果在那里测试，您可以在浏览器的开发人员工具中看到它。你需要添加这个来直观地看到它:

a.nav-link.active {
background-color: rgb(0, 0, 100);
<br>height: 50px;
<br>width: 50px;
<br>display: block;
<br>
}

<a href="#" class="nav-link active" style="background-color:rgb(0, 0, 0);">

这将给它一个块级元素显示属性，这是<a>标签没有的。

您也可以将其包装在div中，并将这些应用于div标记。然而，正如上面的评论所说，我建议分享更多。我的猜测是，要么你期待的标签(一个内联元素)，它没有大小显示为一种颜色，或者你是覆盖它由于优先级。
https://www.w3schools.com/html/html_blocks.asp