css選擇器

前言

css選擇器,是前端的基本功,只要你是一個前端,這個必定要掌握!今天之因此要重溫一下css選擇器,主要是和你們再複習一下css選擇器中的一些經常使用符號的使用,例如「+、~、^、$、>、*」等的使用!之因此要複習呢,是由於我一個寫後端的哥們,前端寫的也很好,可是他今天忽然問我,css中加號和大於號是啥意思?我說,這個貌似jquery中也有吧!好吧,可能這些符號不經常使用,形成咱們對這些符號的陌生!那麼今天,咱們一塊兒再來複習一下吧!

你們在右側搜索框中搜索「選擇器」,會發現,我以前寫過css用僞類nth-child,進行奇偶行的選擇。今天,關於css3僞類選擇器,我就很少描述了!同時你們也能夠看一下我以前寫的「jquery經常使用選擇器總結」,其實,jquery選擇器和css選擇器相似!特別是在屬性選擇和組合選擇上面!

基本選擇器 ID選擇器:#header {} 類選擇器:.header {} 元素選擇器:div {} 子選擇器:ul > li {} 後代選擇器:div p {} 僞類選擇器:a:hover {} 屬性選擇器:input[type="text"] {} id優先級高於類class; 後面的樣式覆蓋前面的; 指定的高於繼承; css選擇器之特殊符號 1、>(大於號) 大於號表明選擇子元素,這個咱們常常用,值得注意的是h1>strong 和h1 strong的區別 這2個都是選擇子元素,可是h1>strong 只選擇某個元素的子元素。例如以下: <h1>This is <strong class="haorooms">very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1> h1>strong ,只有第一個h1下面的strong被選中,第二個不起做用。可是h1 strong,全部的h1下面的strong都被選中了。 2、+號 選擇相鄰兄弟,這點和jquery相同。 例如: <h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p> h1 + p {margin-top:50px;} //h1後面的第一個p元素會有50px的間距。表明選擇緊接在h1 元素後出現的段落
屬性選擇器 css屬性選擇器用處也比較多,以前參加第二節css開發者大會的時候,有的老師分享,他們公司基本上都是用屬性選擇器來寫css,這樣字面明瞭,他們都不怎麼用class。我感受這個要分狀況,那個老師講的項目是angularjs的,所以屬性選擇器比較實用! css的選擇器的詳細介紹 舉幾個例子 1、把包含標題(title)的全部元素變爲紅色 以下寫: *[title] {color:red;} 2、將同時有href 和title 屬性的HTML 超連接的文本設置爲紅色 a[href][title] {color:red;} 3、指定將http://www.51wendang.com /post/css_wl_wys 這篇文字顏色變紅
a[href="http://www.51wendang.com /post/css_wl_wys"] {color: red;} 固然也能夠多個屬性一塊兒,這裏就很少舉例了!
4、屬性與屬性值必須徹底匹配 咱們來看一個class的div <p class="important haorooms">This paragraph is a very important warning.</p> 咱們用class選擇,你們都曉得,很簡答,可是用屬性選擇,咱們用以下: p[class="important"] 是選擇不到的,由於還有一個haorooms。所以,必須這樣寫: p[class="important haorooms"] {color: red;} 5、根據部分屬性值選擇 看到上面多個屬性必須徹底匹配,很不爽,那麼有沒有能夠部分匹配屬性的方法呢?答案是有的。仍是上面的例子,咱們以下選擇就能夠了! p[class~="haorooms"] {color: red;} 若是須要根據屬性值中的詞列表的某個詞進行選擇,則須要使用波浪號(~)。 6、字符串匹配屬性選擇器 上面說到了~(波浪號選擇),有朋友會把他和*= 搞混,例如,以下例子: <p haorooms="importanthaorooms">This paragraph is a very important warning.</p> 咱們能夠用[haorooms * ="haoroom"]來選擇,這個和~的區別就是包含,~是幾個屬性直接有空格,空格中的一個。*=沒有空格,可是包含某個字符。除此以外,還有開頭選擇和結尾選擇,和jquery相似: [haorooms^="haorooms"] 選擇haorooms 屬性值以"haorooms" 開頭的全部元素 [haorooms$="haorooms"] 選擇haorooms 屬性值以"haorooms" 結尾的全部元素七、特定屬性選擇類型 請看下面的例子: *[lang|="en"] {color: red;} 上面這個規則會選擇lang 屬性等於en 或以en- 開頭的全部元素。所以,如下示例標記中的前三個元素將被選中,而不會選擇後兩個元素: <p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p> CSS的基本選擇器 1、元素選擇器 這是最基本的CSS選擇器,HTML文檔中的元素自己就是一個選擇器: p {line-height:1.5em; margin-bottom:1em;} 2、關係選擇器 E F:後代選擇器,該選擇器定位元素E的後代中全部元素F: ul li {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:1px solid #ddd;} //定位具備相同父元素ul裏除第一個li以外的全部li
E ~ F:通常兄弟選擇器,該選擇器定位與元素E具備相同父元素且在標記中位於E以後的全部元素F: h1 ~ p {color:#f00;} //定位具備相同父元素的,h1標籤以後的全部p標籤
3、屬性選擇器 E[attr]:該選擇器定位具備屬性attr的任何元素E: input[required] {border:1px solid #f00;} //定位頁面裏全部具備必填屬性"required"的input
E[attr=val]:該選擇器定位具備屬性attr且屬性值爲val的任何元素E: input[type=password] {border:1px solid #aaa;} //定位頁面裏的密碼輸入框
E[attr|=avl]:該選擇器定位具備屬性attr且屬性值爲val或以val-開始的任何元素E: p[class|=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="http://www.51wendang.comglish"以及title="a english"
E[attr^=val]:該選擇器定位具備屬性attr且屬性值以val開頭的任何元素E: div[class^=a] {color:#666;} //定位頁面裏具備屬性class且屬性值以a開頭的div容器,好比class="a"以及class="ab"
E[attr$=val]:該選擇器與E[attr^=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裏具備link字符串的a連接
4、僞類 :link:未訪問的連接; :visited:已訪問的連接,不建議使用; :hover:鼠標移動到容器,不只限於連接,可用於頁面中的任何元素; :active:被激活時的狀態,不只限於連接,可用於任何具備tabindex屬性的元素; :focus:得到焦點時狀態,不只限於連接,可用於任何具備tabindex屬性的無線: input:focus {border:1px solid #333;} //輸入框得到焦點時的樣式
:enabled:已啓用的界面元素: input:enabled {border:1px solid #899; :disabled:已禁用的界面元素: input:disabled {background:#eee;} :target:該選擇器定位當前活動頁面內定位點的目標元素: #info:target {font-size:24px;} //當訪問的URL網址爲123.html#info 時,id="info"將加載這個字體樣式
:default:應用於一個或多個做爲一組相似元素中的默認元素的UI元素; :valid:應用於有效元素: input:valid {border:1px solid #6a6;} //當輸入框驗證爲有效時加載這個邊框樣式,基於type或pattern屬性
:invalid:應用於空的必填元素,以及未能與type或pattern屬性所定義的需求相匹配的元素: input:invalid {border:1px solid #f00;} //當輸入框爲空且必填時,或已填寫但驗證無效時,加載此邊框樣式
:in-range:應用於具備範圍限制的元素,其中該值位於限制內;好比具備min和max屬性的number和range輸入框; :o ut-of-range:與:in-range選擇相反,其中該值在限制範圍外; :required:應用於具備必填屬性required的表單控件; :o ptional:應用於沒有必填屬性required的全部表單控件 :read-only:應用於其內容沒法供用戶修改的元素; :read-write:應用於其內容可供用戶修改的元素,好比輸入框; :root:根元素,始終指html元素; E F:nth-child(n):該選擇器定位元素E的第n個子元素的元素F: div.class p:nth-child(3) {color:#f00;} //class="class"的div容器裏的第3個元素p,若是第3個子元素不是p,此樣式將失效
E F:nth-last-child(n):該選擇器定位元素E的倒數第n個子元素的元素F; E:nth-of-type(n):該選擇器定位元素E的第n個指定類型子元素; E:nth-lash-of-type(n):該選擇器定位元素E的導數第n個指定類型子元素: .class p:nth-child(2) 與.class p:nth-of-type(2) 的區別在於,若是.class裏的第2個子元素不是P元素時,.class p:nth-child(2) 的樣式將無效,而.class p:nth-of-type(2) 將定位在 .class 裏的第2個p元素 nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n),這其中的n 可使用數字靜態式,好比.nth-child(2n+1) 將匹配第一、3、5...個元素 E:first-child:父元素的第一個子元素E,與:nth-child(1)相同; E:last-child:父元素的倒數第一個子元素E; E:first-of-type:與:nth-of-type(1)相同; E:last-of-type:與:nth-last-of-type(1)相同; E:only-child:父元素中惟一的子元素E; E:only-of-type:父元素中惟一具備該類型的元素E; E:empty:沒有子元素的元素,沒有子元素包括文本節點; E:lang(en):具備使用雙字母縮寫(en)表示的語言的元素; E:not(exception):該選擇器將選擇與括號內的選擇器不匹配的元素: p:not(.info) {font-size:12px;} //匹配全部class值不爲info的p元素
5、僞元素 僞元素可用於定位文檔中包含的文本,爲與僞類進行區分,僞元素使用雙冒號:: 定義,但單冒號: 也能被識別。 ::first-line:匹配文本首行; ::first-letter:匹配文本首字母; ::before 與::after :使用contnet 屬性生成額外的內容並插入在標記中: a[href^=http]::after {content:"link"} //在頁面的a連接的後面插入文字link
::selection:匹配突出顯示的文本: ::selection {background:#444; color:#fff;} //定義選中的文本顏色與背景色
固然,若是要方便的使用這些強大的CSS選擇器的話,使用Chrome、Firefox之類的瀏覽器吧,最起碼得拋棄IE9如下的IE版本瀏覽器吧