使用id和类来为CSS样式化链接

Question

是否有一种方法可以使用id或class的方式来为链接添加样式，而不必为每个元素创建新的选择器？例如，类似于以下内容或接近以下内容的内容将是首选。

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

然而，上述语法不起作用，我能找到的只有

。

#logo a:hover {
    color: black;
}

#logo a:visited {
color: white
}

我觉得这里可能有更简单的方法。

- Rking

---

Sass可以做到这一点（参见Parent References），但它需要使用额外的工具，因此并不是更容易。 - qooplmao

我认为在冒号后面多加一个空格会导致某些浏览器出现问题。 - Scott Simpson

Answer 1

以下是如何对所有链接进行操作的方法，我相信这应该有效：

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

- Bobb Dizzles

Answer 2

并非所有浏览器都支持上述方法，在处理单个页面中的标签与CSS中不同样式时，使用类或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> 

- pkm1986

---

你可以这样放置 class - a.class :link{ ..} 或者这样放置 a:link.class {..} - 两种方式都可以工作？ - Daniel

Answer 3

虽然不能直接在CSS中实现，但有一些项目可以扩展CSS。

可以尝试使用Sass：

http://sass-lang.com

- Tim

Answer 4

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

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

请注意链接伪类的顺序很重要。

- Dave Anderson

Answer 5

我也认为当前的CSS语法并不是最优的。我的个人选择是使用LESS这样的东西，它提供了更加直观和紧凑的语法来为你的工作添加样式。

- BuddhiP