css選擇器規則 - 選擇器內的所有元素的ruleset？

Question

使用at-rules，可以在規則事件期間爲元素創建規則集（如打印，移動設備等）。但是對於特定的選擇器，該怎麼辦？

我正在一個較大的網站的子頁面上工作，我必須使用我的任何頁面的主樣式表。有時候，一個樣式規則會被主樣式表中的規則所欺騙。爲了克服這一點，我最終不得不在我的所有規則之前添加「#mypage #content等等等等」，以確保我的css更具體。它變得非常快速凌亂。我寧願做的是一樣的東西：

@#mypage { 
     div { 
      border: 1px solid #000; 
      } 
     div p { 
      color: #00f; 
      } 
     } 

讓我做的任何規則包含到我的工作頁面的部分的ID。我忘了提及，我不能（據我所知）使用@namespace，因爲我的頁面在模板框架內（因此需要主樣式表），所以如果我只是說@ @space， namespace（my-page-url）我的樣式表會覆蓋主樣式表。

我是否缺少一些簡單的東西？

---

澄清：

對不起，我想在我試圖保持簡單我太含糊...

我正在開發將被置於更加內頁的內容通用模板（標頭，側邊欄導航等），它具有全局樣式表，我無法控制任何內容。

我對我的部分的樣式表有一些自由。我不希望任何規則意外覆蓋全局樣式表，並且我想避免爲我的規則使用非常長的選擇器，以避免全局樣式表覆蓋我的樣式表。例如，如果我想說

「的所有表有一個黑色邊框」

我會讓一個黑色邊框周圍的一些表中的側欄。但是，如果我說

「在div＃內容中的所有表都有黑邊」

這僅適用，只要他們沒有更具體的規則。

現在，我可以通過每條規則，並添加一長串選擇器，以確保我的每個規則都能正常工作，並且只適用於我的部分，但這並不真正有吸引力或有趣。我希望我能窩了我所有的規則內一個較大的統治，就像我上面的例子中，這樣我可以有一個主要規則：

#content { 

    //and place all of my style rules inside of that: 



p { 
    border: pink; 
    } 

，這樣我只需要聲明一次我的專一性和它涵蓋了該主規則中的每個規則。

Answer 1

從我讀過下面的規則符合該法案，深度僅爲1級，而且是在公然最典型的網站，我見過和使用：

#content div { 
    ... your rules ... 
} 

，只會影響的div這與內容的ID的元素下

有沒有辦法爲「組」，這些規則等等。：

#content { 
    div { 
    ... your rules ... 
    } 
} 

這將是很好，但唉，它不是它寫的方式。

Answer 2

您可以使用「！」來替換其他樣式表。重要的」聲明：

div { 
    border: 1px solid #000 !important; 
    } 
div p { 
    color: #00f !important; 
    } 

更多信息：http://www.w3.org/TR/CSS2/cascade.html#important-rules

Answer 3

不是一個完美的解決方案，因爲它使用基於PHP的服務器端處理，但這可能對你不夠好：

http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor

Answer 4

一個very similar question（一個相當差的標題）被問得前一陣子。

最受歡迎的答案是Shaun Inman's server-side preprocessor（它現在已被CSSCacheer所取代）。

我的建議是Sass。

無論哪種情況，這在香草CSS中都有些不足。

Answer 5

有一種方法可以使用CSS引擎來做到這一點，例如， less（node.js庫）。

據lesscss「網站（和個人經驗），你可以這樣窩CSS規則：

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

並且使用命令行實用程序less編譯到這個

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

隨着less可以也有字體大小等變量，所以它使變化更快。