使用 id 和类的 CSS 样式链接答案

【问题标题】：CSS styling links using id's and classes使用 id 和类的 CSS 样式链接
【发布时间】：2012-12-06 01:40:36
【问题描述】：

有没有一种方法可以使用 id 或 class 来设置链接样式，而不必为每个单独的元素创建新的选择器？例如像这样或接近这样的东西会更可取

#logo {
    a: link {color: black}
    a: visited{color: black}
    a: hover{color: black}
}

但是，上面的语法不起作用，我只能找到

#logo a:hover {
    color: black;
}

#logo a:访问过 {
颜色：白色
}

我觉得有比这更简单的方法。

【问题讨论】：

Sass 可以做到这一点（sass-lang.com/tutorial.html，请参阅父参考资料），但它确实需要您使用额外的工具，因此本身并不容易。
我认为冒号后面的多余空格会在某些浏览器中造成问题。

标签： css class styling

【解决方案1】：

以下是如何对所有链接执行此操作我相信它应该有效：

#logo a:link,
#logo a:visited,
#logo a:hover {
   color: black;
}

【讨论】：

【解决方案2】：

当您在单个页面中处理带有标签的 CSS 中的不同样式时，并非所有浏览器都支持上述使用 class 或 ID 分隔标签样式的方法。

可以按照以下方法：

**If using ID with Field**

a:link#myID {
    color: green;
    background-color: transparent;
    text-decoration: none;
} 
a:visited#myID {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover#myID {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active#myID {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

    <a  href="#" target="_blank" ID="myID">Click Here</a> 

**If using Class with Field**

a:link.myClass {
    color: green;
    background-color: transparent;
    text-decoration: none;
} 
a:visited.myClass {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover.myClass {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active.lx {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

<a  href="#" target="_blank" class="myClass">Click Here</a>

【讨论】：

所以你可以这样放置类 - a.class :link{ ..} 或这样 a:link.class {..} - 它们都有效吗？

【解决方案3】：

不是直接在css中，而是有一些项目扩展了css

查看 sass：

http://sass-lang.com

【讨论】：

【解决方案4】：

我也相信当前的 CSS 语法并不是那么理想。我个人的选择是使用LESS 之类的东西，您可以在其中获得更直观、更紧凑的语法来为您的作品设置样式。

【讨论】：

【解决方案5】：

对于纯 CSS，您必须指定每个伪选择器，但您可以将它们分组以应用相同的样式属性；

#logo a:link,
#logo a:visited,
#logo a:hover {
  color: black;
}

当心The order of link pseudo-classes matters。

【讨论】：