Question

我有以下代码

<div class="subNav">
    <a href="work.php" style="current" title="">Work Experience</a>
</div>

我有一个外部样式表，将效果应用于.subNav和.current。我使用样式.current覆盖.subNav上应用的样式（使用它来显示用户所在的页面，4em大小用于测试代码）。

CSS：

.subNav a, .subNav a:after{
    font: normal normal 600 0.75em 'Lato', sans-serif;
    margin: 0px 5px;
    display: inline-block;
    color: #FFFFFF;
}

.current {
    font: normal normal 900 4em 'Lato', sans-serif;
    margin: 10px 0px;
}

基本上，它完全忽略了.current。我已经尝试将直接代码直接更改为链接代码中的各种样式属性（例如颜色等）并且它可以工作，但不会随着样式而改变。

Answer 1

你写的是风格而不是类

<div class="subNav">
    <a href="work.php" class="current" title="">Work Experience</a>
</div>

Answer 2

您无法在样式属性中应用CSS类。内联样式只能使用样式属性编写。如果您想从外部申请，您可以使用班级或ID（如果您想要独特）。

 <a href="work.php" class="current" title="">Work Experience</a>

或

 <a href="work.php" id="current" title="">Work Experience</a>

如果您使用ID，则需要编写如下的CSS。

#current {
 font: normal normal 900 4em 'Lato', sans-serif;
 margin: 10px 0px;
 }

Answer 3

HTML style属性用于编写将直接应用于HTML元素的内联CSS，并且仅用于该元素。

正确使用样式属性

<div class="subNav">
    <a href="work.php" style="font: normal normal 900 4em 'Lato', sans-serif; margin: 10px 0px;" title="">Work Experience</a>
</div>

没有办法将现有的CSS规则集专门附加到单个HTML元素，因为CSS意味着排在第二位并应用于预先存在的HTML之上。

许多开发人员解决此问题的一种方法是，在您可能无法确定应用样式的确切位置的情况下，因为目标可以更改，就是使用class名称。这会将您的样式应用于任何具有该类的元素，以及将该类放在课程中的任何元素。

如果你想采用这种方法，你的CSS已经是正确的。接下来，您要做的就是将class属性添加到您希望应用这些样式的任何HTML元素中。因此，在您尝试设置当前链接样式的情况下，而不是确保当前链接最终为style="current"，而是确保当前链接最终为class="current"。

如果您担心.current中的样式被应用于其他具有该类名称的元素，您可以将CSS更改为仅具有类名＆＃34;的目标元素。电流＆＃34;在subNav内部，如下面的代码所示。

.subNav .current {
    font: normal normal 900 4em 'Lato', sans-serif;
    margin: 10px 0px;
}

我觉得有必要指出，但是如果你遇到这个问题它只是一个不同问题的症状，因为你应该负责任地命名不会相互冲突的事情。

在旁注中，我注意到了您的代码中的其他几项 -

如果您的<div>类.subNav是唯一的＆＃34; subNav＆＃34;在页面上，您应该是id而不是class
在探索<nav>标记如何工作以及何时/应该使用它而不是<div>一起使用时可能是值得的
您不应该在title标记上留下空的<a>属性。拥有一个空的title属性比没有一个属性更糟糕。我当然建议您通过填写一些有用的信息来解决问题，而不是仅仅删除它。

类里面的链接不起作用

3 个答案: