Z 2 CSS選擇器基本語法

2021-08-21 12:52:00 字數 3110 閱讀 1890

●　e1 e2：選中e1後代元素中的e2元素。

# div 後代中的img


>>> response.css('div img')


['descendant-or-self::div/descendant-or-self::*/img' data=''>,


'descendant-or-self::div/descendant-or-self::*/img' data=''>,


'descendant-or-self::div/descendant-or-self::*/img' data=''>,


'descendant-or-self::div/descendant-or-self::*/img' data=''>,


'descendant-or-self::div/descendant-or-self::*/img' data=''>]
●　e1>e2：選中e1子元素中的e2元素。

# body 子元素中的div


>>> response.css('body>div')


['descendant-or-self::body/div' data='>,


'descendant-or-self::body/div' data='\n '>]
●　[attr]：選中包含attr屬性的元素。

# 選中包含style屬性的元素


>>> response.css('[style]')


['descendant-or-self::*[@style]' data='>]
●　[attr=value]：選中包含attr屬性且值為value的元素。

# 選中屬性id值為images-1的元素


>>> response.css('[id=images-1]')


["descendant-or-self::*[@id = 'images-1']" data='>]
●　e:nth-child(n)：選中e元素，且該元素必須是其父元素的第n個子元素。

# 選中每個div的第乙個a


>>> response.css('div>a:nth-child(1)')


["descendant-or-self::div/*[name() = 'a' and (position() = 1)]" data='name: image 1 


'>,


"descendant-or-self::div/*[name() = 'a' and (position() = 1)]" data='name: image 4 


'>]


# 選中第二個div的第乙個a


>>> response.css('div:nth-child(2)>a:nth-child(1)')


["descendant-or-self::*/*[name() = 'div' and (position() = 2)]/*[name() = 'a' and


(position() = 1)]" data='name: image 4 


'>]
●　e:first-child：選中e元素，該元素必須是其父元素的第乙個子元素。

●　e:last-child：選中e元素，該元素必須是其父元素的倒數第乙個子元素。

# 選中第乙個div的最後乙個a


>>> response.css('div:first-child>a:last-child')


["descendant-or-self::*/*[name() = 'div' and (position() = 1)]/*[name() = 'a' and


(position() = last())]" data='name: image 3 


'>]
●　e::text：選中e元素的文字節點。

# 選中所有a的文字


>>> sel = response.css('a::text')


>>> sel


['descendant-or-self::a/text()' data='name: image 1 '>,


'descendant-or-self::a/text()' data='name: image 2 '>,


'descendant-or-self::a/text()' data='name: image 3 '>,


'descendant-or-self::a/text()' data='name: image 4 '>,


'descendant-or-self::a/text()' data='name: image 5 '>]


>>> sel.extract()


['name: image 1 ',


'name: image 2 ',


'name: image 3 ',


'name: image 4 ',


'name: image 5 ']
關於css選擇器的使用先介紹到這裡，更多詳細內容可以參看css選擇器文件：

css語法選擇器

表示的選擇所有的節點 表示的是id為container的 節點 container選擇所有class屬性是container的節點 li a 選擇所有的li標籤下面的a元素 ul p 選擇ul後面面的第乙個p元素 div container ul 選擇id是container的div的第乙個ul元素...

css語法 選擇器

css 選擇器是用來選擇標籤的，選出來以後給標籤加樣式。標籤選擇器 類選擇器 層級選擇器 後代選擇器 id選擇器 組選擇器 偽類選擇器 根據標籤來選擇標籤，以標籤開頭，此種選擇器影響範圍大，一般用來做一些通用設定。示例 type text css pstyle hellodiv hellop 根據類...

css的基本語法和選擇器

我們上一章簡單了解了怎麼在檔案裡寫入css和盒模型的具體結構。我們這一章說一下css的語法 css的語法要點有三點 1.選擇器，2.大括號，3.多條生命。大概的公式是 選擇器 我們繼續拿之前的頁面說 選擇器是一種在複雜的頁面裡面快速找到你要渲染的 乙個或者多個 元素的標示方式 由於我們關於選擇器要講...