Question

是否有一种使用id或类设置链接样式的方法，而无需为每个元素创建新的选择器？例如像这样或接近这样的东西会更好

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

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

#logo a:hover {
    color: black;
}

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

我觉得这比这更简单。

Answer 1

继承人如何对所有链接进行操作我相信它应该有效：

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

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>

Answer 3

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

查看sass：

http://sass-lang.com

Answer 4

我也相信当前的CSS语法不是那么理想。我个人的选择是使用像LESS这样的东西，你可以用更加直观和紧凑的语法来设计你的作品。

Answer 5

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

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

请注意The order of link pseudo-classes matters。

使用id和类的CSS样式链接

5 个答案: