覆蓋CSS *定義的最佳方式！重要

我在一個產品中定義了自己的CSS。其定義的部分是定義的所有元素是這樣的：覆蓋CSS *定義的最佳方式！重要

* { 
    font-face: Helvetica; 
    font-size: 12px !important; 
}

我使用他們的CSS創建一些畫面，但要做出一些改變，像這樣：

.change { 
    font-size: 1.25em; 
}

現在，當我有內部的一個段落一個被分配了變化類的div不起作用。

<div class="change"> 
    <p>Lorem ipsum dolor...</p> 
</div>

此的jsfiddle說明問題了：http://jsfiddle.net/uqogzayn/5/

這的jsfiddle顯示一個錯誤的工作方案：http://jsfiddle.net/uqogzayn/3/

~~問題：什麼是讓一切是div內與類的最佳方式更改爲使用我想要的字體大小？~~ 問題：如何將我的change類應用於div中的所有內容，同時仍遵循CSS最佳實踐？

'.change * {...}'？ – 2014-11-23 05:29:36

我不認爲他使用'！important'，這就是他使用的產品定義的。 – fpsColton 2014-11-23 05:31:01

正確。我不重要。該產品的定義使用重要的，我包括他們的CSS，所以我的擴展頁面將融入。 – markbernard 2014-11-23 05:33:06

我繼續四處搜尋。首先，我想看看你是否可以刪除以前提出的定義。答案是否定的。另一種選擇是定義每個子元素，如下所示：

.change p { 
    font-size: 1.25em !important; 
}

雖然這工作，我也知道這是不好的CSS形式。此外，如果我不得不爲每個我想要覆蓋的元素添加一個條目。如果還有其他我想創建的類遇到同樣的問題呢？

所以我想過使用一個復位並想出了：

* { 
    font-size: inherit !important; 
} 
body { 
    font-size: 12px !important; 
}

這整個的經歷讓我意識到你永遠不應該使用通配符選擇申報任何東西。網頁中的所有內容都將從主體繼承，因此只需在主體中定義您的基礎。

2014-11-23 05:30:57 markbernard

我們可以使用通配符選擇器。不好的做法是使用！重要的關鍵字。相反，我們必須玩css的優先級和層次結構。 – 2014-11-23 05:36:17

您也可以使用通配符作爲子元素，而不是定義每個子元素，即。改變* {font-size：1.25em！important; } – outlyer 2014-11-23 05:37:10

是的使用！重要的是壞的，但我必須在這種情況下使用它來覆蓋原來的CSS，因爲他們在*選擇器中使用重要的定義。 – markbernard 2014-11-23 12:46:32

當您添加*它意味着所有的元素得到這個CSS屬性和<p>是因此獲得*性能不.change類，你必須添加.change類段像這樣

<p class="change">

HTML的元素

或您可以添加新的CSS類這樣

.change p 
{ 
font-size:1.25em; 
}

我希望我有你的權利，這是你想要的。

2014-11-23 05:36:26 Diyaa

我試圖避免明確定義一個p標籤的'change'。這違背了CSS最佳實踐。 – markbernard 2014-11-23 12:43:04

只需添加新的類.change * {font-size：1.25em; }它會工作 – Diyaa 2014-11-23 13:12:02

我不想改變一切。我只想改變我申請我班的地點。除此之外，與原作者的CSS一樣糟糕。 – markbernard 2014-11-23 14:24:04

回答