css - 如何在 CSS 中为链接添加装饰？

Question

我有以下工作：

#s5_bottom_menu_wrap a{
color:#333333 !important;
}

我希望能够添加以下内容：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

但是，当我这样做时：

#s5_bottom_menu_wrap a{
color:#333333 !important;
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}
}

...在谷歌浏览器的检查元素中，它为添加的 CSS 显示错误“未知属性名称”，并且没有任何效果。我想要做的是做设计想要的，即让这些导航链接没有装饰，并且只在悬停时为链接加下划线。

我究竟做错了什么？应该如何添加这些文本装饰？

我已经根据我在这里得到的答案尝试了这个，这是正确的吗？

/* bottom section Nav links in footer */
#s5_bottom_menu_wrap a{ color:#333333 !important; text-decoration:none;}
#s5_bottom_menu_wrap a:link {text-decoration:none;}
#s5_bottom_menu_wrap a:visited {text-decoration:none;}
#s5_bottom_menu_wrap a:hover {text-decoration:underline;}
#s5_bottom_menu_wrap a:active {text-decoration:none;}

Answer 1

你不能在 CSS 中嵌套选择器，你需要这样做

#s5_bottom_menu_wrap a:link,
#s5_bottom_menu_wrap a:visited,
#s5_bottom_menu_wrap a:hover,
#s5_bottom_menu_wrap a:active {
   /* Styles goes here */
}

如果您想要嵌套方便，请查看 CSS Preprocessor like LESS或SASS

Answer 2

您正在将样式添加到元素的 css 样式块中的、:link和内。那不管用。而是尝试以下:visited:hover:activea

#s5_bottom_menu_wrap a{ color:#333333 !important; text-decoration:none; }

#s5_bottom_menu_wrap a:hover {text-decoration:underline;}