這個CSS類能以更短，更好的方式編寫嗎？

你可以用更短的方式編寫這個CSS類嗎？謝謝。這個CSS類能以更短，更好的方式編寫嗎？

.MessageTitle a, .MessageTitle a:visited, .MessageTitle a:active, .MessageTitle a:hover,.MessageSender a, .MessageSender a:visited, .MessageSender a:active, .MessageSender a:hover 
{ 
    text-decoration: none; 
    outline: none; 
    display:block; 
    vertical-align: middle; 
    text-align: center; 
    color: Black; 
    line-height:30px;  
} 

.MessageTitle a:active, .MessageTitle a:hover,.MessageSender a:active, .MessageSender a:hover 
{ 
    text-decoration: underline; 
}

來源

2011-09-25 MonsterMMORPG

.MessageTitle a, 
.MessageSender a 
{ text-decoration: none; 
    outline: none; 
    display:block; 
    vertical-align: middle; 
    text-align: center; 
    color: Black; 
    line-height:30px;  
} 

.MessageTitle a:active, 
.MessageTitle a:hover, 
.MessageSender a:active, 
.MessageSender a:hover 
{ 
    text-decoration: underline; 
} 

.MessageSender a:visited, 
.MessageSender a:visited 
{ 
    text-decoration: none; 
}

你或許應該還包括:focus。我也會使用:link。

在實踐中，正確DRY簡潔，簡潔和UX一致性，我會在全球範圍宣佈所有這些風格在裸a選擇，所以更喜歡這樣的：

a:link 
{ text-decoration: none; 
    outline: none; 
    color: Black } 

a:active, 
a:hover, 
a:focus 
{ text-decoration: underline} 

a:visited 
{ text-decoration: none} 

.MessageTitle a, 
.MessageSender a 
{ 
    display:block; 
    vertical-align: middle; 
    text-align: center; 
    line-height:30px;  
}

來源

2011-09-26 09:38:10 graphicdivine

真的很簡單的方法是看少CSS。 www.lesscss.org

來源

2011-09-25 23:00:38 Eddie

您可以將單個類應用於錨點，以便您不定義兩次相同的組。

.messageLink, .messageLink:visited { 
    color: #000; 
    display:block; 
    line-height:30px; 
    outline: none; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: middle; 
} 

.messageLink:active, .messageLink:hover { text-decoration:underline; }

來源

2011-09-25 23:01:43 Seth

感謝，但不是我的意思：） – MonsterMMORPG

不，沒有辦法縮短這個時間。我發現對堆棧溢出另一個問題：CSS more short query

來源

2011-09-25 23:05:24 NE555

這個CSS類能以更短，更好的方式編寫嗎？

回答

相關問題