CSS相同的风格为a:link a:visited a:hover a:active,真的要把它全部写出来4次

0yycz8jy  于 2023-04-01  发布在  其他
关注(0)|答案(6)|浏览(129)

呵呵
使用CSS时。如果a:link a:visited a:hover a:active的CSS样式相同,那么真的需要多次将其写出来吗?使用自定义链接。

.DT_compare a:link {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

有捷径吗?
了不起

pw9qyyiw

pw9qyyiw1#

我不认为你可以做任何短于:

.DT_compare a:link,
.DT_compare a:visited,
.DT_compare a:hover,
.DT_compare a:active, {
  font-family:"Lucida Grande", Arial, sans-serif;
  font-size:11px;
  line-height:14px;
  font-weight:normal;
  font-style:normal;
  color:#EEE;
  text-align:center; 
}
1dkrff03

1dkrff032#

忘记伪类,只选择a

.DT_compare a {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

这不是一个非常具体的选择器;如果有必要,你可以找到一些其他方法来增加它,这样它就可以覆盖你的a:hovera:active选择器,或者使用whoughton的答案,只指定所有四个。
同样,如果你的主超链接样式应用于a:hovera:active,而在它们之前没有任何东西,只要你把你的.DT_compare a规则放在它们下面,它就应该工作得很好。

0mkxixxg

0mkxixxg3#

只要离开:link关闭影响所有的状态一次。

5fjcxozz

5fjcxozz4#

Less可以通过'mixins'来帮助您,例如:

.a {
  text-decoration: none;
  color: black;
}

a:link { .a; }
a:visited { .a; }

如果有更好的方法,我不会感到惊讶,但这是我所知道的最好的方法。less真的很棒-它基本上是CSS,但程序员会如何设计它。你永远不必再重复自己......

8ljdwjyq

8ljdwjyq5#

.DT_compare a[href]{ ... }

是很好的,因为你可以在那里偷偷地加入一些额外的特殊性(属性选择器==类选择器,虽然)。

hs1ihplo

hs1ihplo6#

.DT_compare a:link, a:visited {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}

.DT_compare a:hover, a:active {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}

相关问题