學習Python寫爬蟲的時候，遇到css定位問題，故小結一下css選擇器定位的方式

萬用字元選擇器：

* {color:red;}

CSS 類選擇器

匹配所有class = ‘important’

*.important {color:red;}

去掉前面萬用字元也是一樣的。

結合元素選擇器

匹配所有p標籤下class = ‘important’

p.important {color:red;}

CSS 多類選擇器

匹配class = ‘important warning’，類名中存在空格分開的情況

.important.warning {background:silver;}

CSS ID 選擇器

匹配所有id = ‘intro’

#intro {font-weight:bold;}

屬性選擇器

匹配所有屬性是title

*[title] {color:red;}

匹配所有a標籤下屬性名是href

a[href] {color:red;}

多屬性匹配

a[href][title] {color:red;}

planet[moons] {color:red;}

根據具體屬性值選擇

匹配a標籤下href = ‘    ’

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

XML文件也可以實行‘屬性 ’和 ‘值’ 進行匹配器

planet[moons="1"] {color: red;}

根據部分屬性值選擇

使用‘~’，匹配多個p標籤下class名中含有‘important’

p[class~="important"] {color: red;}

子串匹配屬性選擇器

下表是對這些選擇器的簡單總結：

a[href*="w3school.com.cn"] {color: red;}

特定屬性選擇型別

匹配所有lang屬性下以‘en’或以‘en-’開頭的所有元素，例如：‘en’，‘en-us’，‘en-au’,不適用‘enen’

*[lang|="en"] {color: red;}

CSS 選擇器參考手冊

後代選擇器（descendant selector）又稱為包含選擇器。

匹配<h1>...<em>hello</em>...</h1>的所有元素，兩個元素間隔可以是無限的

h1 em {color:red;}

選擇子元素

h1 > strong {color:red;}

結合後代選擇器和子選擇器

匹配table標籤下class = company，此類結構的所有元素

<table class = company>

    <td>

        <p>hello</p>

    </td>

</table>

table.company td > p

選擇相鄰兄弟

匹配相同父標籤下，h1和p的所有元素

h1 + p {margin-top:50px;}

注：h1和p必須由相同的父標籤

結合其他選擇器

html > body table + ul {margin-top:20px;}

CSS2 - :first-child 偽類

匹配第一個p標籤或第一個li標籤

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

匹配所有p標籤下，第一個li標籤

p > i:first-child{font-weight:bold;} 

匹配第一個p標籤下的所有li標籤

p:first-child i{color:blue;}