2012-02-19 26 views
0

我不確定如果我沒有記錯,但我想我讀過一次在css規則中使用>選擇器是不好的做法?有人能對這個話題有所瞭解嗎?在CSS中使用子選擇器(>)有問題嗎?

例如:

<style> 
#search-form { 
... whatever rules... 
} 
#search-form > input[type=text] { 
... rules... 
} 
#search-form > button { 
... rules ... 
} 
</style> 
<form id="search-form"> 
    <input type="text" placeholder="Search..."> 
    <button>Search!</button> 
</form> 
+1

['>'是一個工具(http://www.w3.org/TR/CSS2/selector.html#child-selectors) 。像任何工具一樣,如果使用不當或不正確或不準確或缺乏理解,結果可能會出乎意料。 – 2012-02-19 23:44:44

回答

2

這當然不是不好的做法,但應該使用知識的好處和缺點。使用子選擇器(E > F)將只選擇直接的孩子,並且由於這阻止了完整的後代遍歷,因此瀏覽器將花更少的時間來應用後代選擇器(E F)。但是,該元素在IE6中不受支持,因此,如果這對您而言很重要,請加以說明。

這有一個很好的寫了一些很好的鏈接:CSS child vs descendent selector

1

>選擇不支持IE6,所以如果你需要支持舊的瀏覽器,你不能使用它。

http://caniuse.com/#feat=css-sel2

除此之外,沒有理由不使用它。

+0

這當然可以是這個想法來自哪裏(基於舊的建議)。 – 2012-02-19 23:49:20

1

子選擇器僅匹配左側選擇器的直接後代。它可能會,也可能不是你想要的,但對所有後代應用某種風格,無論它們在左側選擇器下有多深,都是比較常見的。

用例如#mydiv > span問問自己:我真的不想在#mydivp內匹配span#mydiv以內的lispan怎麼樣?等等也許你不會 - 也許你會這麼做。重要的部分是understand what it does