關於CSS選擇器

2021-10-03 19:22:40 字數 3302 閱讀 4380

關於css選擇器部分摘自另一博友博文:

關於css選擇器:

css基本語法

1元素選擇器:

直接選擇文件元素

比如head,p

2 類選擇器:

元素的class屬性,比如

類名就是important

.important選擇所有有這個類屬性的元素

可以結合元素選擇器,比如p.important

3 id選擇器:

元素的id屬性,比如

id就是intro

#intro用於選擇id=intro的元素

可以結合元素選擇器,比如p#intro

4 屬性選擇器:

選擇有某個屬性的元素,而不論值是什麼。

*[title]選擇所有包含title屬性的元素

a[href]選擇所有帶有href屬性的錨元素

還可以選擇多個屬性,比如:a[href][title],注意這裡是要同時滿足。

限定值:a[href="www.so.com"]

5  後代(包含)選擇器:

選擇某元素後代的元素(層級不受限制)

選擇h1元素的em元素:h1 em

6 子元素選擇器:

範圍限制在子元素

選擇h1元素的子元素strong:h1 > strong

例1:列印元素的型別和名稱

print(type(soup.title))

print(soup.title.name)

例2:選擇所有的title標籤

print(soup.title)

print(soup.title.string) # 只列印文字

print(soup.select('title'))

例3:選擇所有的p標籤中的第1個

print(soup.select('p')[1])
例4:選擇body標籤下的所有a標籤

items = soup.select('body a')

for item in items:

print(item)

例5:選擇body標籤下的直接子元素標籤a

print(soup.select('body > a'))

print(soup.select('p > a'))

例6:選擇id=link1後的所有兄弟節點標籤。類名前加點,id名前加#

items = soup.select('#link1 ~ .sister')

for item in items:

print(item)

print(soup.select('#link1 + .sister'))
例1:查詢class類名為sister的標籤。

items = soup.select('.sister')

for item in items:

print(item)

例2:查詢p標籤下class類名為title的標籤。

items = soup.select('p.title')

for item in items:

print(item)

例1:選擇id屬性為link2的所有標籤。

print(soup.select('#link2'))
例2:選擇a標籤,其id屬性為link2的標籤。

print(soup.select('a#link2'))
例1:選擇id屬性為link2和id屬性為link3的所有標籤。

items = soup.select('#link2, #link3')

for item in items:

print(item)

例2:選擇class屬性為title,id屬性為link2和id屬性為link3的所有標籤。

items = soup.select('.title, #link2, #link3')

for item in items:

print(item)

例:查詢a標籤下存在herf屬性的標籤。

items = soup.select('a[href]')

for item in items:

print(item)

例1:選擇a標籤,其屬性href=的所有標籤。

items = soup.select('a[href=""]')

for item in items:

print(item)

例2:選擇a標籤,其href屬性以http開頭的所有標籤。

print(item)例3:選擇a標籤,其href屬性以lie結尾的所有標籤。

items = soup.select('a[href$="lie"]')

for item in items:

print(item)

例4:選擇a標籤,其href屬性包含.com的標籤。

items = soup.select('a[href*=".com"]')

for item in items:

print(item)

例1:首先選中所有的p標籤中的第2個標籤,然後在該標籤中查title的屬性值為12的標籤。

mytag = soup.select('p')[1]

na_name = mytag.select('[title="12"]')

print(na_name)

例2:首先選中所有的p標籤中的第2個標籤,然後在該標籤列表中查詢a標籤,並將該列表中的第2個標籤的文字取出。

mytag = soup.select('p')[1]

href_text = mytag.select('a')[1].get_text()

print(href_text)

例:選擇class類名為sister的所有標籤中的第乙個。

print(soup.select_one('.sister'))

關於CSS選擇器

通用選擇器 這個選擇器不經常用,看著省事,問題也有。標籤選擇器 html標籤都可以進行設定,但是常用的如ul,li,a標籤等最好還是給乙個class或者id,乙個頁面中如果有多個相同標籤,容易混淆。類選擇器 類選擇器用得比較多,也比較方便。同乙個類名可以賦給多個標籤,同樣設定了樣式也可以進行重複使用...

關於CSS選擇器

css選擇器是css規則的一部分,它能夠告訴瀏覽器,相應的html元素的樣式規則。id選擇器,類選擇器,元素選擇器 屬性選擇器 屬性選擇器只對存在屬性的html元素有效,常見標籤的href屬性 url a href 偽類和偽元素選擇器 article 組合器選擇器 important style行內...

關於CSS實戰,選擇器

平時習慣用的一些選擇器 整理出來,id選擇器 banner p.intro a 請將該樣式應用給應用了intro類的段落 p 所派生的每個 鏈結a,注意在p和.intro之間沒有空格 這是在告訴css,這個 intro類必須專用於這個標籤 才有效。p intro a 以.intro類定義了樣式的任何...