網易雲課堂聽課筆記
http://study.163.com/course/courseLearn.htm?courseId=1004933008#/learn/video?lessonId=1050680884&courseId=1004933008
聽課講義鏈接:
http://f61be319.wiz03.com/share/s/3S6-cp1BIQ952yXKyj02PIM423MOKL3kakos2GmtSf0Uj_M2
建議看看視頻,講得更加清楚.
css選擇器: 一種快速定位元素的方法.
用css選擇器比正則表達式更方便.
beautifulsoup和scrapy等都支持css選擇器.
* 選擇所有元素.
.class 如.intro,選擇所有class="intro"的元素.
#id 如#firstname,選擇所有id="firstname"的元素.
element 如p,選擇所有<p>元素.
:not(selector) 如:not(p),選擇每個並非p元素的元素.
element1,element2 選擇所有<element1>和<element2>元素.
element element 如div p,選擇<div>元素內的所有<p>元素(後代們).
element>element 如div>p,選擇所有父級是 <div> 元素的 <p> 元素(兒子們).
element1~element2 如p~ul,選擇p元素之後的每一個ul元素(弟弟們).
element+element 如div+p,選擇所有緊接着<div>元素之後的<p>元素(第一個弟弟).
[attribute]
舉例: [target]
解釋: 選擇所有帶有target屬性元素
[attribute=value]
舉例: [target=-blank]
解釋: 選擇所有使用target="-blank"的元素
[attribute^=value]
舉例: a[href^="https"]
解釋: 選擇每一個href屬性的值以"https"開頭的元素
[attribute$=value]
舉例: a[href$=".pdf"]
解釋: 選擇每一個href屬性的值以".pdf"結尾的元素
[attribute*=value]
舉例: a[href*="runoob"]
解釋: 選擇每一個href屬性的值包含子字符串"runoob"的元素
:first-child
舉例: p:first-child
解釋: 指定只有當<p>元素是其父級的第一個子級的樣式。
:first-of-type
舉例: p:first-of-type
解釋: 選擇每個p元素是其父級的第一個p元素
:last-of-type
舉例: p:last-of-type
解釋: 選擇每個p元素是其父級的最後一個p元素
:only-of-type
舉例: p:only-of-type
解釋: 選擇每個p元素是其父級的唯一p元素
:only-child
舉例: p:only-child
解釋: 選擇每個p元素是其父級的唯一子元素
:nth-child(n)
舉例: p:nth-child(2)
解釋: 選擇每個p元素是其父級的第二個子元素
:nth-last-child(n)
舉例: p:nth-last-child(2)
解釋: 選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數
:nth-of-type(n)
舉例: p:nth-of-type(2)
解釋: 選擇每個p元素是其父級的第二個p元素
:nth-last-of-type(n)
舉例: p:nth-last-of-type(2)
解釋: 選擇每個p元素的是其父級的第二個p元素，從最後一個子項計數
:last-child
舉例: p:last-child
解釋: 選擇每個p元素是其父級的最後一個子級。
:empty
舉例: p:empty
解釋: 選擇每個沒有任何子級的p元素（包括文本節點）
下面是一些組合用法,組合有很多,這衹是幾個例子:
element.class舉例: p.hello
解釋: 所有class="hello"的p標籤
element.class.class
舉例: p.hello.world
解釋: 所有class="hello world"的標籤
element.class element.class
舉例: p.hello p.world
解釋: 所有class="hello"的p標籤下的所有class="world"的p標籤