單元素上的CSS類

你好我的博客上有一些CSS問題。我的WordPress主題在CSS文件中有一個帖子樣式部分，其中有一個「Entry」類，其中爲文章區域內的鏈接定義了「a」屬性。我從css生成器生成了一個按鈕，並在使用href指向其他某個網站的文章中插入了該按鈕。我的CSS文件有這樣的，單元素上的CSS類

.Entry a{color:black;text-decoration:underline}; 

.button {background:black;color:white And some other Styling};

我用這個代碼來顯示按鈕。

<a href="some link" class="button">Go to this link</a>

如果不使用class =「button」，則鏈接將跟隨Entry a屬性。但是，當我使用它的類，它顯示按鈕混合入口和類按鈕樣式。我不希望按鈕使用Entry屬性。任何幫助？

來源

2012-08-07 John Carter

你可以重寫第一條規則使用CSS3 :not pseudo-class selector作爲

.Entry a:not(.button) {color:black;text-decoration:underline}

這將滿足您的需求，但不支持IE版本9以前的版本。

一個真正的跨瀏覽器解決方案涉及更多：您需要「撤銷」.Entry a適用於您的.button規則的屬性。例如：

.Entry a {color:black;text-decoration:underline} 

.button {color:white;text-decoration:none;background:black}

更新：我忘記了一件相當重要的事情。

如果您確實執行「撤消」路由，您需要確保「撤消」選擇器的specificity至少等於第一個選擇器的值。我建議閱讀鏈接頁面（這不是很長），以掌握這個概念;在這個特定的情況下，要實現這一點，你必須寫a.button而不是簡單的.button。

來源

2012-08-07 10:17:09 Jon

我喜歡這個，不知道這個選擇器，我猜這是CSS3？ – Nuxy 2012-08-07 10:18:17

@Nuxy：是的，CSS3。添加了一個鏈接到W3C wiki。 – Jon 2012-08-07 10:19:58

謝謝喬恩。這正是我正在尋找的。非常感謝你。 – 2012-08-07 10:30:17

爲了避免.Entry a CSS樣式了當您使用選擇應用.button你應該選擇overwritte .button所有.Entry a

定義例如屬性：

.Entry a{color:black;text-decoration:underline}; 

.button {color:white;text-decoration:none;background:black;color:white And some other Styling};

來源

2012-08-07 10:16:50 Nuxy

感謝您的回答:) – 2012-08-07 10:29:47

井CSS3，你可以這樣做：

.Entry a:not(.button)

這將限制從影響與.button任何元素的.Entry a規則。

如果CSS3不是一個選項（即您需要支持IE < = 8），則需要覆蓋無意的樣式被繼承。例如，如果您的按鈕以.Entry a的不必要邊框結尾，請在您的.button規則中覆蓋此內容，例如，

.button { border: none; /* more button styles */ }

來源

2012-08-07 10:18:01 Utkanos

謝謝你的回答:) – 2012-08-07 10:28:53

這實際上並不起作用，因爲'.Entry a'仍然比'.button'更具體。我做了一個[小提琴]（http://jsfiddle.net/MattiasBuelens/E3ERE/），請親自看看。 – 2012-08-07 10:37:06

在小提琴上幹得好。具體情況需要改變，商定。第一個選擇是最好的選擇 - 我只是提到如果CSS3不是一種選擇，那麼需要覆蓋樣式。 – Utkanos 2012-08-07 10:39:42

最簡單的事情就是「撤消」元素從.Entry a的樣式繼承的特定樣式。例如，要撤消文字裝飾風格，可以使用text-decoration:none。

如果你只需要它爲較新的瀏覽器工作，那麼你可以使用not（）選擇器@Jon提到。

來源

2012-08-07 10:18:53

感謝您的回答:) – 2012-08-07 10:27:42

你可能會覆蓋在.Entry a

例如被定義在.button類的任何樣式如果你不想你的文字加下劃線，你可以使用text-decoration: none

.Entry a{ 
    color: black; 
    text-decoration: underline; 
} 

a.button { 
    background: black; 
    color: white; 
    text-decoration: none; 
    /*And some other Styling*/ 
}

而且在你的CSS括號};後不要用分號。只需使用一個括號關閉}

來源

2012-08-07 10:19:26 Fabian

感謝您的回答:)是的，我錯誤地使用了大括號後面的分號。 – 2012-08-07 10:26:43

不客氣..啊，好吧:) – Fabian 2012-08-07 10:28:42

這實際上不會工作，因爲'.Entry a'仍然比'.button'更具體。我做了一個[小提琴]（http://jsfiddle.net/MattiasBuelens/E3ERE/），請親自看看。編輯： – 2012-08-07 10:36:23

發生這種情況是因爲.Entry a比.button的特異性更高。結果是您的元素從.button收到其實際background財產，但其color和text-decoration財產來自.Entry a。

有幾種方法來「解決」這樣的：

增加.button選擇的特異性。
例如，如果您僅在a標籤上使用.button標籤，則可以將選擇器更改爲a.button。這個新選擇器與.Entry a（一個標籤值和一個類值）具有相同的特徵，因此「贏家」由源順序決定。如果a.button在.Entry a之後出現在CSS文件中，則a.button會佔上風。
降低.Entry a選擇器的特異性。
您是否真的需要僅在.Entry元素內定位a標籤？你能簡單地把它作爲所有a標籤的基礎樣式嗎？如果可以，您可以簡單地將.Entry a更改爲a。這個新的選擇器只有一個標記值，它不如.button中的一個類值。
定義.button上的額外選擇器。
例如，您可以使用.button, a.button，以便第二個選擇器接管第一個選擇器失敗的位置。要警告的是，當您遇到與其他標籤（如input或button標籤）相同的問題時，這可能會變得非常混亂。
~~使用 !important。~~
千萬不要這樣做，因爲如果您嘗試製作.big-button課程，您需要覆蓋某些.button樣式，否則您將陷入麻煩。

如果您想了解更多關於特異性的信息，請點擊這裏good article關於它是什麼以及它是如何計算的。

來源

2012-08-07 10:29:17

感謝Mattias :) – 2012-08-07 10:33:17

單元素上的CSS類

回答

相關問題