## 前言
css選擇器,是前端的基本功,只要你是一個前端,這個一定要掌握!今天之所以要重溫一下css[選擇器](http://www.haorooms.com/search?keyword=%E9%80%89%E6%8B%A9%E5%99%A8),主要是和大家再復習一下css選擇器中的一些常用符號的使用,例如“+、~、^、$、>、*”等的使用!之所以要復習呢,是因為我一個寫后端的哥們,前端寫的也很好,但是他今天突然問我,css中加號和大于號是啥意思?我說,這個貌似jquery中也有吧!好吧,可能這些符號不常用,造成我們對這些符號的陌生!那么今天,我們一起再來復習一下吧!
## 我之前的文章
大家在右側搜索框中搜索“[選擇器](http://www.haorooms.com/search?keyword=%E9%80%89%E6%8B%A9%E5%99%A8)”,會發現,我之前寫過css用偽類[nth-child](http://www.haorooms.com/post/css3_nth-child),進行奇偶行的選擇。今天,關于css3偽類選擇器,我就不多描述了!同時大家也可以看一下我之前寫的“[jquery常用選擇器總結](http://www.haorooms.com/post/jquery_selecter_zj)”,其實,jquery選擇器和css選擇器類似!特別是在屬性選擇和組合選擇上面!另外,我在小工具里面,也寫了[css選擇器](http://www.haorooms.com/tools/css_selecter/),這個比較全,里面包含偽類、偽元素、屬性等等!地址是:[http://www.haorooms.com/tools/css_selecter/](http://www.haorooms.com/tools/css_selecter/)?感興趣的可以看一下!
## 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的,因此屬性選擇器比較實用!
### 舉幾個例子
**1、把包含標題(title)的所有元素變為紅色**
如下寫:
~~~
*[title] {color:red;}
~~~
**2、將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置為紅色**
~~~
a[href][title] {color:red;}
~~~
**3、指定將[http://www.haorooms.com/post/css_wl_wys](http://www.haorooms.com/post/css_wl_wys)?這篇文字顏色變紅**
~~~
a[href="http://www.haorooms.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" 結尾的所有元素
~~~
**7、特定屬性選擇類型**
請看下面的例子:
~~~
*[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>
~~~
**8、CSS3 element1~element2 選擇器**
同樣是~波浪號,上面第五條那么用,代表部分屬性選擇,假如p~ul 這么用,代表:**所有相同的父元素中位于 p 元素之后的所有 ul 元素**。
例如:
~~~
p~ul
{
background:#ff0000;
}
~~~
html代碼如下:
~~~
<div>一個 div 元素。</div>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
<p>第一段。</p>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
<h2>另一個列表</h2>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
~~~
上面代碼中,大家可以試一下:第一段,之后的2個UL都是紅色!第一段前面的一個UL是沒有反應的!
## 小結
今天就先總結到這來,css選擇器,是比較重要的知識點,希望大家多多復習,溫故而知新!希望這篇文章對您有所幫助!
- CSS知多少
- css知多少——目錄
- css知多少(1)——我來問你來答
- css知多少(2)——學習css的思路
- css知多少(3)——樣式來源與層疊規則
- css知多少(4)——解讀瀏覽器默認樣式
- css知多少(5)——選擇器
- css知多少(6)——選擇器的優先級
- css知多少(7)——盒子模型
- css知多少(8)——float上篇
- css知多少(9)——float下篇
- css知多少(10)——display
- css知多少(11)——position
- CSS深入理解
- HTML加載順序
- CSS網頁實戰案例
- CSS偽類選擇器
- 重溫css的選擇器
- CSS3的nth-child() 選擇器,表格奇偶行變色
- CSS選擇器演示
- 那些年踩過的坑之:first-child偽類選擇器
- CSS border-image
- CSS3 border-image詳解、應用及jQuery插件
- css3:border-image邊框圖像詳解
- CSS3 Border-image
- Flex布局
- Flex 布局教程:語法篇
- Flex 布局教程:實例篇
- Flex 布局示例