CSS / 样式标题标签

Question

我尝试了许多其他地方和stackoverflow的css，但不知何故我无法完成它。

我很新于css，并使用Joomla和一个模板。我正在使用custom.css文件夹对样式进行某些自定义。这是我想做的：

我想在h5成为链接时对其进行样式设置。

例如，我正在创建一个自定义html模块，在内容中有一个列表。并且在内容中，我给每个h5样式，以及一个链接到网站上某个页面的链接。

我想要实现的是拥有蓝色的列表。当鼠标悬停时有下划线，并且仍然保持相同的颜色。当单击返回到原始位置时，没有下划线和颜色变化。(在任何情况下都是相同的颜色，只有在悬停时才有下划线。)

我尝试过这些：h5、h5 a、h5 a:hover、h5 .contentheading a等等...

在某些情况下，它可以使用：

h5 {
  font-family: arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

h5 a {
  color: #0088CC;
}

h5 a: hover {
  color: #0088CC;
  text-decoration: underline; 
}

我看到有人建议在标题是链接的情况下使用 'a'。

但现在有些东西覆盖了它，我完全迷失了。

我在检查中看到了 a:hover 样式。

我想在几个内容（在自定义模块中）中使用这个 h5，当我想将内容样式化为链接列表时。我认为有一个带有特定样式的标题会很实用，这样我就可以灵活使用它。

非常感谢，任何帮助都将是极好的 :)

- user1750613

---

不要忘记将适当的答案标记为“正确”。 - JSK NS

Answer 1

看起来你在 a: 和 hover 之间有一个空格。尝试使用以下代码：

h5 {
  font-family: arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

h5 a {
  color: #0088CC;
}

h5 a:hover {
  color: #0088CC;
  text-decoration: underline; 
}

- JSK NS

---

我简直不敢相信在一个空格上花了几个小时！非常感谢，它现在运行得很好。 - user1750613

@OP，你并不是第一个做这种事情的开发者。 - JSK NS

哎呀，我花了太多时间写答案了。 - Optimus Prime

Answer 2

正如 JSK NS 所指出的那样，在 a: 和 hover 之间不应该有空格。如果你想让链接只在鼠标悬停时有下划线，你应该在 h5 a 部分中添加

text-decoration: none

你也可以删除 h5 a:hover 中重复的颜色，因为它是多余的。最终的 CSS 应该像这样：

h5 {
  font-family: arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

h5 a {
  color: #0088CC;
  text-decoration: none;
}

h5 a:hover {
  text-decoration: underline; 
}

- marco-fiset

---

非常感谢，我不知道何时应该加空格或不加空格，我以为在冒号后面要加空格，就像颜色中一样... - user1750613

是的，看起来有些冗余，但在我的原始模板主题CSS中，我有一个更大类别的悬停样式和颜色，所以我认为它会覆盖它，因为当我将其删除时，悬停颜色会回到我没有指定的其他颜色。 - user1750613

Answer 3

您的语法有误。a:hover 之间应该没有空格，应该写成一个单词。

h5 {
    font-family: arial, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
}

h5 a {
    color: #0088CC;
}

h5 a:hover {
    color: #0088CC;
    text-decoration: underline; 
}

- Optimus Prime

---

CSS不支持嵌套。也许你正在使用像LESS这样的预处理器？ - xec

你的整个代码示例都是语法错误。如前所述，CSS根本不支持嵌套。 - BoltClock

谢谢！在代码中每行前面加空格会有什么区别吗？或者我不应该问这个问题！ - user1750613

BoltClock，我有点困惑，我们在谈论哪个代码出现了语法错误？ - user1750613

@user1750613 没有空格不会影响。但是你不能在a:hover之间加入空格，因为它们必须在一起。这就像你把a:hover写成a : h o v e r并问这有什么问题一样。 - Optimus Prime