改变所有链接状态相同的颜色css

时间:2022-11-21 16:00:14

I have a spanned class called "tomato".

我有一门叫做“西红柿”的课。

My css is:

我的css是:

.tomato a:link {color:#FF0000;}      /* unvisited link */
.tomato a:visited {color:#FF0000;}  /* visited link */
.tomato a:hover {color:#FF0000;}  /* mouse over link */
.tomato a:active {color:#FF0000;}  /* selected link */ 

Is there a way I can combine all these into a smaller piece of code? (I want the link to be red in all states)

有没有一种方法可以把所有这些合并成一个更小的代码?(我希望所有州的链接都是红色的)

3 个解决方案

#1


20  

This is the shortest, I don't think you can do it any shorter than:

这是最短的,我不认为你能做得比:

.tomato a:link, .tomato a:visited, .tomato a:hover, .tomato a:active { color:#FF0000; }

OR

.tomato { a:link, a:visited, a:hover, a:active { color:#FF00000; } }

Hope this helps.

希望这个有帮助。

#2


11  

.tomato a:link,
.tomato a:visited,
.tomato a:hover,
.tomato a:active {
    color:#F00;
}

Note, the color HEX could be abbreviated, too. :)

注意,颜色十六进制也可以缩写。:)

If you choose to use a CSS framework to organize your CSS such as LESS, it could be much simpler than the above:

如果您选择使用CSS框架来组织您的CSS,那么它可能比上面的要简单得多:

.tomato {
   a:link,
   a:visited,
   a:hover,
   a:active {
       color:#F00;
   }
}

#3


4  

It is actually best to use the attribute selector. In this case it would be:

实际上最好使用属性选择器。在这种情况下,它将是:

.tomato a[href]{color:#F00;}

or if you must:

或者如果你必须:

.tomato [href]{color:#F00;}

#1


20  

This is the shortest, I don't think you can do it any shorter than:

这是最短的,我不认为你能做得比:

.tomato a:link, .tomato a:visited, .tomato a:hover, .tomato a:active { color:#FF0000; }

OR

.tomato { a:link, a:visited, a:hover, a:active { color:#FF00000; } }

Hope this helps.

希望这个有帮助。

#2


11  

.tomato a:link,
.tomato a:visited,
.tomato a:hover,
.tomato a:active {
    color:#F00;
}

Note, the color HEX could be abbreviated, too. :)

注意,颜色十六进制也可以缩写。:)

If you choose to use a CSS framework to organize your CSS such as LESS, it could be much simpler than the above:

如果您选择使用CSS框架来组织您的CSS,那么它可能比上面的要简单得多:

.tomato {
   a:link,
   a:visited,
   a:hover,
   a:active {
       color:#F00;
   }
}

#3


4  

It is actually best to use the attribute selector. In this case it would be:

实际上最好使用属性选择器。在这种情况下,它将是:

.tomato a[href]{color:#F00;}

or if you must:

或者如果你必须:

.tomato [href]{color:#F00;}