2012-12-06 26 views
2

有沒有一種方法使用一個id或一個類的樣式鏈接,而不必爲每個單獨的元素創建一個新的選擇器?例如 這樣的事情或接近,這將是最好使用ID和類的CSS樣式鏈接

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

然而,上面的語法不工作,而不是所有我能找到的是

#logo a:hover { 
    color: black; 
} 


#logo答:訪問{
顏色:白色
}

我覺得有比這更簡單的方法。

+3

Sass可以執行此操作(http://sass-lang.com/tutorial.html,請參閱Parent References),但它確實需要您使用涉及額外的工具,因此本身並不容易。 – qooplmao

+0

我認爲冒號後的額外空間會導致某些瀏覽器出現問題。 –

回答

5

繼承人如何把它做的所有鏈接 我相信它應該工作:

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

我也認爲當前的CSS語法並不是最優的。我個人的選擇是採用類似LESS的東西,在那裏你可以得到更直觀,更緊湊的語法來設計你的作品。

0

對於純CSS,您必須指定每個僞選擇器,但您可以將它們分組以應用相同的樣式屬性;

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

當心那The order of link pseudo-classes matters

3

並非所有的瀏覽器都支持上述方法,即當您在單個頁面中使用標記處理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>