Question

如何在不影响其功能的情况下缩短此代码？

.taster a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

.contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

如果你能帮我解决这个问题，我将不胜感激。

Answer 1

使用,

加入不同选择器的匹配样式

.taster a:link, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover, .contact a:hover, a:active {
    font-size: 120%;
    color: #000000;
}

或者如果您希望它更小，请尝试使用a minifier。

Answer 2

这就是全部：

.taster a:link, 
.taster a:visited,
.contact a:link, 
.contact a:visited {
  text-decoration: none; 
  color: #FFFFFF;
}

.taster a:hover, 
.taster a:active,
.contact a:hover,
.contact a:active {
  font-size: 120%;
  color: #000000;
}

Answer 3

.taster a:link, .taster a:visited, .contact a:link, a:visited {
    text-decoration: none; 
    color: #FFFFFF;
}

.taster a:hover , .taster a:active, .contact a:hover , a:active {
    font-size: 120%;
    color: #000000;
}

或者你可以添加不同的（或一个）类，例如“link”（对于第一个）和“hover”（对于第二个）

.link a:hover , a:active {
    font-size: 120%;
    color: #000000;
}    
.hover a:link, a:visited{
    text-decoration: none; 
    color: #FFFFFF;
}

（CSS）如何缩短CSS代码

3 个答案: