2009-06-07 63 views
18

我在嘗試查找有關如何在樣式表中正確編寫CSS規則的任何具體細節時遇到問題,其中類或ID嵌套在許多其他ID和樣式中,例如,CSS樣式嵌套 - 正確的表單?

.mainbody #container #header #toprightsearch .searchbox {} 

所以在這裏我們有一個toprightsearch ID內的searchbox類,在頭ID,在容器ID,在mainbody類。

但它似乎正常工作,如果我省略了一些ID的。

什麼是這些上市的正確方法是什麼?
如果我包括所有的父母,它是否使它更具體? 如果我不包括所有的瀏覽器,它可以在不同的瀏覽器上出錯嗎?

並在此主題的任何附加信息,將不勝感激。

感謝

回答

7

如果您有更多的父母,但也提高了選擇特異性。您不應該忽略父母的跨瀏覽器問題。

沒有正確多位家長列出的;這取決於你需要什麼標記。正如您所看到的,selector1 selector2意味着在selector1內的任何級別都有selector2,您可以調整它以適應您需要的任何行爲。

在你的榜樣,您應該列出.mainbody #container #header #toprightsearch .searchbox如果你意味着是風格只適用於.searchbox ES這是整個層次內。如果相反,您希望.searchboxes存在於其他條件下以獲得相同樣式,那麼您應該在層次結構中限制較少。這只是關於你想要完成的事情。

回覆評論:標識產生更多的特異性,所以省略它們減少了您的規則的特殊性更多。

0

做什麼它說(至少在Firefox)下面的代碼。它的顏色輸入紅色

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
.mainbody #container #header #toprightsearch .searchbox { 
    background-color:red; 
} 
</style> 
</head> 

<body class="mainbody"> 

<div id="container"> 
    <div id="header"> 
     <div id="toprightsearch"> 
      <input type="text" class="searchbox" /> 
     </div> 
    </div> 

</div> 
</body> 
</html> 

我想你應該看看在拼寫ID和類時是否出現了問題。

+0

謝謝,但我沒有讓它工作的問題。我只是注意到,如果我省略父母ID和類,它有時會起作用。所以我正在尋找列出規則的正確方法。 – user103219 2009-06-07 16:49:52

+0

誰低估了這個問題。對於razass所問的這個問題,這是一個非常好的答案。 – Chuck 2009-06-07 17:28:37

2

W3 Selectors Documentation

後代選擇表達的圖案這樣的關係。後代選擇器由兩個或多個由空格分隔的選擇器組成。形式爲「AB」匹配的後代選擇,當元素B是一些祖先元素A的任意後代

因此,在短期,不,你不必須包括父元素的所有和不應該導致任何跨瀏覽器問題。然而,利用該選擇器:

.mainbody .searchbox {} 

定義的樣式將適用於任何元件一類的searchbox其是否直接或間接地從下降的元素與mainbody類。

與您提出的選擇,但是:

.mainbody #container #header #toprightsearch .searchbox {} 

定義的樣式是從一個元素降臨,mainbody類更具體的,所以只有元素,然後用#container ID的元素,#header#toprightsearch在該訂單和類名爲searchbox的訂單將應用已定義的樣式。

33
.searchbox {} 

與.searchbox樣式任何

.mainbody .searchbox{} 

風格,從任何.mainbody,直接孩子,孫子,四曾孫下降的任何.searchbox,無所謂。只有

#toprightsearch > .searchbox {} 

樣式.searchboxes是#toprightsearch的直接孩子

#container * .searchbox {} 

樣式.searchbox的是孫子或更高的#container。

下面是關於這一主題的好文件:w3C selectors

3

ID是特定頁面。所以,你只需要使用

#toprightsearch { 
stylename: stylevalue; 
} 

如果您尋找嵌套類,然後以正確的格式是

.header .textBoxes { 
    stylename: stylevalue; 
} 

如果你知道父母的確切孩子,那麼你使用>符號。所以,如果你的文檔是這樣的:

<div class="header"> 
    <div class="menu"> 
     <input type="text" class="textBox" /> 
    </div> 
</div> 

您可以使用此:

.header > .menu > .textBox {somestyle:somevalue;} 

這意味着直接內。菜單類項目其本身直接低於只用.textBox類項目具有.header類的元素。

1

理論上,一個ID只能用於頁面上的一個特定項目。所以,你應該只與toprightsearch所以你的CSS的ID一個項目,你只需要表明:

toprightsearch .searchbox {} 

,因爲只有一個項目在網頁上用的toprightsearch的ID,其他所有的選擇都不必要。

如果您的頁面上有兩個項目,ID爲toprightsearch那麼這就是錯誤的編碼習慣。