2016-11-21 28 views
0

一類我想改變身體內的所有錨標籤的外觀,除了那些在navbar,我想:選擇全身除了在身體

a:not(.navbar) a { 
    color: #333; 
} 

a:hover:not(.navbar): { 
    color: #999; 
} 

但它不工作,所有標籤變得一樣。 這可能嗎?

編輯:我還有一些其他屬性,如轉換,所以我不能設置恢復其餘的值。

回答

2

我認爲的代碼是相當不言自明,但我會解釋:

選擇只有當階級「導航欄」的那些所有div,和裏面的所有鏈接應用某些樣式。

div:not(.navbar) a { 
    color: #333; 
} 

div:not(.navbar) a:hover { 
    color: #999; 
} 

div:not(.navbar) a { 
 
    color: red; 
 
} 
 
div:not(.navbar) a:hover { 
 
    color: green; 
 
}
<div> 
 
    <a href="#">link</a> 
 
</div> 
 

 
<div class="navbar"> 
 
    <a href="#">link should NOT be red</a> 
 
</div> 
 

 
<div> 
 
    <a href="#">link</a> 
 
</div>

+0

'*:not(.navbar)a' should also work。 – n00dl3

+0

@ n00dl3它應該但我不確定它的[性能好](https://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) – Alvaro

+0

它會也適用於非div包裝元素 – n00dl3

3

你試過選擇.navbar a標記並恢復他們的價值觀?

a { 
    color: #333; 
} 

a:hover { 
    color: #999; 
    transition: color 2s; 
} 

.navbar a, 
.navbar a:hover { 
    color: initial; 
    transition: none; 
} 
+0

對不起,上面沒有提到,但我也有一些其他屬性,以及一些轉換,上面只是爲了掌握邏輯。 – pleasega

+0

你應該仍然可以保留這些;只需使用'color:'屬性覆蓋'.navbar a'類型選擇器的[CSS特異性](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)。 –

+0

過渡和所有其他風格仍將在那裏。你只會覆蓋你需要的東西。而且,一般來說,最好使用具有足夠跨瀏覽器支持的選擇器/僞選擇器(而「:not」在這裏不太適合)。 – n1kkou