css 的選擇器的詳細介紹前言 css 選擇器, 是前端的基本功, 只要你是一個前端, 這個一定要掌握! 今天之所以要重溫一下 css 選擇器, 主要是和大家再復****一下 css 選擇器中的一些常用符號的使用, 例如“+、~、^、$、> 、*”等的使用! 之所以要復****呢,是因為我一個寫后端的哥們css大于號是什么選擇器, 前端寫的也很好, 但是他今天突然問我,css 中加號和大于號是啥意思?我說css大于號是什么選擇器, 這個貌似 中也有吧! 好吧,可能這些符號不常用,造成我們對這些符號的陌生!那么今天,我們一起再來復****一下吧! 大家在右側搜索框中搜索“選擇器”, 會發現, 我之前寫過 css 用偽類 nth-child ,進行奇偶行的選擇。今天,關于 css3 偽類選擇器,我就不多描述了! 同時大家也可以看一下我之前寫的“ 常用選擇器總結”, 其實, 選擇器和 css 選擇器類似!特別是在屬性選擇和組合選擇上面! 基本選擇器 ID 選擇器: # {} 類選擇器: . {} 元素選擇器: div {} 子選擇器: ul > li {} 后代選擇器: div p {} 偽類選擇器: a:hover {} 屬性選擇器: input[type="text"] {} id 優先級高于類 class ; 后面的樣式覆蓋前面的; 指定的高于繼承; css 選擇器之特殊符號 1、>( 大于號) 大于號代表選擇子元素, 這個我們經常用, 值得注意的是 h1> 和 h1 的區別這2 個都是選擇子元素, 但是 h1> 只選擇某個元素的子元素。
例如如下: <h1>This is <>very</> <>very</> .</h1> <h1>This is <em> <>very</></em> .</h1> h1> , 只有第一個h1 下面的 stron g 被選中, 第二個不起作用。但是 h1 ,所有的 h1 下面的 都被選中了。 2、+號選擇相鄰兄弟,這點和 相同。例如: <h1>This isa .</h1> <p>This is .</p> <p>This is .</p> h1+p {-top:50px;} //h1 后面的第一個 p 元素會有 50px 的間距。
代表選擇緊接在 h1 元素后出現的段落屬性選擇器 css 屬性選擇器用處也比較多, 之前參加第二節 css 開發者大會的時候, 有的老師分享, 他們公司基本上都是用屬性選擇器來寫 css, 這樣字面明了, 他們都不怎么用 class 。我感覺這個要分情況, 那個老師講的項目是 s 的,因此屬性選擇器比較實用! 舉幾