类内部链接不起作用答案

【问题标题】：class inside link not working类内部链接不起作用
【发布时间】：2014-08-13 01:45:18
【问题描述】：

我有以下代码

<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。我曾尝试直接在链接代码中放置直接代码来更改各种样式属性（例如颜色等），它可以工作，但不会随样式而改变。

【问题讨论】：

将样式更改为类
什么是style="current"？将其更改为class
只使用.subNav a.current 而不是.current
谢谢你们，我的意思是写类而不是风格。 MarmiK 用额外的一点点把它钉牢了，干杯！

标签： html css styles href

【解决方案1】：

你写的是风格而不是类

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

【讨论】：

【解决方案2】：

您不能在样式属性中应用 CSS 类。只有您可以使用 style 属性编写内联样式。如果您想从外部申请，您可以使用类或 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;
 }

【讨论】：

【解决方案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 更改为仅针对您的内部类名称为“current”的元素subNav 如下代码所示。

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

不过，我觉得有义务指出，如果您遇到此问题，那只是另一个问题的症状，因为您应该负责任地命名事物，以免相互冲突。

在旁注中，我注意到您的代码中还有一些其他项目-

如果您的<div> 的类为.subNav 是页面上唯一的“子导航”，那么您应该是id 而不是class
可能值得探索 <nav> 标签的工作原理，以及应该在何时/何地使用它而不是 <div> 一起使用
你不应该在你的<a>标签上留下那个空的title属性。拥有一个空的title 属性比没有属性更糟糕。我当然建议您通过填写一些有用的信息来解决这个问题，而不是直接删除它。

【讨论】：