css的選擇器的詳細介紹

css的選擇器的詳細介紹、,-、?前言css選擇器，是前端的基本功，只要你是一個前端，這個一定要掌握！今天之所以要重溫一下css選擇器，主要是和大家再復習一下css選擇器中的一些常用符號的使用，例如“+、?、人、$、>、*”等的使用！之所以要復習呢，是因為我一個寫后端的哥們，前端寫的也很好,但是他今天突然問我，css中加號和大于號是啥意思？我說，這個貌似jquery中也有吧！好吧，可能這些符號不常用，造成我們對這些符號的陌生！那么今天，我們一起再來復習一下吧！大家在右側搜索框中搜索“選擇器”，會發(fā)現(xiàn)，我之前寫過css用偽類nth-child，進行奇偶行的選擇。今天，關于css3偽類選擇器，我就不多描述了！同時大家也可以看一下我之前寫的“jquery常用選擇器總結”，其實，jquery選擇器和css選擇器類似！特別是在屬性選擇和組合選擇上面！基本選擇器ID選擇器：#header{}類選擇器：.header{}元素選擇器：div{}子選擇器：ul>li{}后代選擇器：divp{}偽類選擇器：a:hover{}屬性選擇器：input[type="text"]{}id優(yōu)先級高于類class；后面的樣式覆蓋前面的；指定的高于繼承；css選擇器之特殊符號1、 >（大于號）大于號代表選擇子元素，這個我們經(jīng)常用，值得注意的是hl>strong和hlstrong的區(qū)別這2個都是選擇子元素，但是h1>strong只選擇某個元素的子元素。例如如下：<hl>Thisis<strongclass="haorooms">very</strong><strong>very</strong>important.</hl><hl>Thisis<em>really<strong>very</strong></em>important.</hl>h1>strong，只有第一個h1下面的strong被選中，第二個不起作用。但是h1strong，所有的hl下面的strong都被選中了。2、 +號選擇相鄰兄弟，這點和jquery相同。例如：<h1>Thisisaheading.</h1><p>Thisisparagraph.</p><p>Thisisparagraph.</p>h1+p{margin-top:50px;}〃h1后面的第一個p元素會有50px的間距。代表選擇緊接在h1元素后出現(xiàn)的段落屬性選擇器css屬性選擇器用處也比較多，之前參加第二節(jié)css開發(fā)者大會的時候，有的老師分享，他們公司基本上都是用屬性選擇器來寫css,這樣字面明了，他們都不怎么用class。我感覺這個要分情況，那個老師講的項目是angularjs的，因此屬性選擇器比較實用！舉幾個例子1、 把包含標題（title）的所有元素變?yōu)榧t色如下寫：*[title]{color:red;}2、 將同時有href和title屬性的HTML超鏈接的文本設置為紅色a[href][title]{color:red;}3、 指定將/post/css_wl_wys這篇文字顏色變紅a[href="/post/css_wl_wys"]{color:red;}當然也可以多個屬性一起，這里就不多舉例了！4、 屬性與屬性值必須完全匹配我們來看一個class的div<pclass="importanthaorooms">Thisparagraphisaveryimportantwarning.</p>我們用class選擇，大家都曉得，很簡答，但是用屬性選擇，我們用如下：p[class="important"]是選擇不到的，因為還有一個haorooms。因此，必須這樣寫：p[class="importanthaorooms"]{color:red;}5、 根據(jù)部分屬性值選擇看到上面多個屬性必須完全匹配，很不爽，那么有沒有可以部分匹配屬性的方法呢？答案是有的。還是上面的例子，我們?nèi)缦逻x擇就可以了！p[class~="haorooms"]{color:red;}如果需要根據(jù)屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。6、 字符串匹配屬性選擇器上面說到了~（波浪號選擇），有朋友會把他和*=搞混，例如，如下例子：<phaorooms="importanthaorooms">Thisparagraphisaveryimportantwarning.</p>我們可以用[haorooms*="haoroom"]來選擇，這個和?的區(qū)別就是包含，?是幾個屬性直接有空格，空格中的一個。*=沒有空格，但是包含某個字符。除此之外，還有開頭選擇和結尾選擇，和jquery類似：[haoroomsA="haorooms"] 選擇haorooms屬性值以"haorooms"開頭的所有元素[haorooms$="haorooms"] 選擇haorooms屬性值以"haorooms"結尾的所有元素7、 特定屬性選擇類型請看下面的例子：*[lang|="en"]{color:red;}上面這個規(guī)則會選擇lang屬性等于en或以en-開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇后兩個元素：<plang="en">Hello!</p><plang="en-us">Greetings!</p><plang="en-au">G'day!</p><plang="fr">Bonjour!</p><plang="cy-en">Jrooana!</p>CSS的基本選擇器1、元素選擇器這是最基本的CSS選擇器，HTML文檔中的元素本身就是一個選擇器：p{line-height:1.5em;margin-bottom:1em;}2、關系選擇器EF：后代選擇器，該選擇器定位元素E的后代中所有元素F：ulli{margin-bottom:0.5em;}E>F：子選擇器，該選擇器定位元素E的直接子元素中的所有元素F,它將忽略任何進一步的嵌套：ul>li{list-style:none;}//僅限ul的直接子元素li，如果li里面還嵌套著另一個ul結構時，最里面的li將被忽略E+F:相鄰兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標記中緊鄰E的元素F：li+li{border-top:lpxsolid#ddd;}//定位具有相同父元素ul里除第一個li之外的所有l(wèi)iE?F:一般兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標記中位于E之后的所有元素F：hl?p{color:#f00;}〃定位具有相同父元素的，hl標簽之后的所有p標簽3、 屬性選擇器E[attr]:該選擇器定位具有屬性attr的任何元素E：input[required]{border:1pxsolid#f00;}〃定位頁面里所有具有必填屬性"required"的inputE[attr=val]:該選擇器定位具有屬性attr且屬性值為val的任何元素E：input[type=password]{border:lpxsolid#aaa;}//定位頁面里的密碼輸入框E[attrl=avl]：該選擇器定位具有屬性attr且屬性值為val或以val-開始的任何元素E：p[classl=a]{color:#333;}//定位頁面里所有的P段落里具有class屬性且屬性值為a或是a-開始的，比如class="a"以及class="a-b"E[attr~=val]:該選擇器定位具有屬性attr且屬性值為完整單詞val的任何元素E：div[title?=english]{color:#f88;}//定位頁面里所有具有屬性title且屬性值里擁有完整單詞english的div容器，比如title="glish"以及title="aenglish"E[attrA=val]:該選擇器定位具有屬性attr且屬性值以val開頭的任何元素E：div[classA=a]{color:#666;}〃定位頁面里具有屬性class且屬性值以a開頭的div容器，比如class="a"以及class="ab"E[attr$=val]：該選擇器與E[attrA=val]正好相反，定位具有屬性attr且屬性值以val結尾的任何元素E：div[class$=a]{color:#f00;}〃定位頁面里具有屬性class且屬性值以a結尾的div窗口，比如class="nba"以及class="cba"E[attr*=val]：該選擇器與E[attr~=val]相似，但更進一步，定位具有屬性attr且屬性值任意位置包含val的元素E，val可以是一個完整的單詞，也可以是一個單詞中的一部分：a[title*=link]{text-decoration:underline;}〃定位所有title里具有l(wèi)ink字符串的a鏈接4、 偽類:link:未訪問的鏈接；:visited：已訪問的鏈接，不建議使用；:hover:鼠標移動到容器，不僅限于鏈接，可用于頁面中的任何元素；:active：被激活時的狀態(tài)，不僅限于鏈接，可用于任何具有tabindex屬性的元素；:focus:獲得焦點時狀態(tài)，不僅限于鏈接，可用于任何具有tabindex屬性的無線：input:focus{border:lpxsolid#333;}//輸入框獲得焦點時的樣式:enabled:已啟用的界面元素：input:enabled{border:lpxsolid#899;}:disabled:已禁用的界面元素：input:disabled{background:#eee;}:target：該選擇器定位當前活動頁面內(nèi)定位點的目標元素：#info:target{font-size:24px;}〃當訪問的URL網(wǎng)址為123.html#info時，id="info"將加載這個字體樣式:default:應用于一個或多個作為一組類似元素中的默認元素的UI元素；:valid:應用于有效元素：input:valid{border:1pxsolid#6a6;}〃當輸入框驗證為有效時加載這個邊框樣式，基于type或pattern屬性:invalid：應用于空的必填元素，以及未能與type或pattern屬性所定義的需求相匹配的元素:input:invalid{border:1pxsolid#f00;}//當輸入框為空且必填時，或已填寫但驗證無效時，加載此邊框樣式:in-range:應用于具有范圍限制的元素，其中該值位于限制內(nèi)；比如具有min和max屬性的number和range輸入框；:out-of-range：與:in-range選擇相反，其中該值在限制范圍外；:required:應用于具有必填屬性required的表單控件；:optional:應用于沒有必填屬性required的所有表單控件:read-only:應用于其內(nèi)容無法供用戶修改的元素；:read-write：應用于其內(nèi)容可供用戶修改的元素，比如輸入框；:root：根元素，始終指html元素；EF:nth-child(n):該選擇器定位元素E的第n個子元素的元素F：div.classp:nth-child(3){color:#f00;}〃class="class"的div容器里的第3個元素p，如果第3個子元素不是p，此樣式將失效EF:nth-last-child(n)：該選擇器定位元素E的倒數(shù)第n個子元素的元素F；E:nth-of-type(n)：該選擇器定位元素E的第n個指定類型子元素；E:nth-lash-of-type(n)：該選擇器定位元素E的導數(shù)第n個指定類型子元素：.classp:nth-child(2)與.classp:nth-of-type(2)的區(qū)別在于，如果.class里的第2個子元素不是P元素時，.classp:nth-child(2)的樣式將無效，而.classp:nth-of-type(2)將定位在.class里的第2個p元素nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)，這其中的n可以使用數(shù)字靜態(tài)式，比如.nth-child(2n+1)將匹配第1、3、5...個元素E:first-child：父元素的第一個子元素E,與:nth-child(1)相同；E:last-child：父元素的倒數(shù)第一個子元素E；E:first-of-type：與:nth-of-type(1)相同；E:last-of-typ