目錄
1.常用CSS選擇器介紹
以下是一個包含常用類選擇器的案例，在案例后有具體的選擇器使用介紹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*標簽選擇器*/
p{
background-color: pink;
}
/*類選擇器*/
.h1Line{
background-color: greenyellow;
}
/*id選擇器*/
#h2{
background-color: rosybrown;
}
/*定位直接子元素*/
#info > li{
background-color: orangered;
}
/*根據屬性定位*/
input[name="username"]{
background-color: dodgerblue;
}
</style>
</head>
<body>
<div>
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
</div>
<div>
<h1 class="h1Line">我是標題1</h1>
</div>
<div>
<h2 id="h2">我是標題2</h2>
<h2 id="h2s">我是標題2的參照例子</h2>
</div>
<div id="info">
<li>姓名</li>
<li>年齡</li>
<li>身高</li>
<div>
<li>班級</li>
<li>教師</li>
<li>人數</li>
<em>asbas</em>
</div>
</div>
<form>
<input type="text" name="username"/>
<input type="password" name="password"/>
</form>
</body>
</html>
1.1 標簽選擇器
根據標簽的名字選擇。示例代碼如下：
p{
background-color: pink;
}
1.2 類名選擇器
根據類名選擇，那么需要在類名前加一個點。示例代碼如下：
.h1Line{
background-color: greenyellow;
}
1.3 id選擇器
根據id選擇，那么需要在id的前面加一個#號。示例代碼如下：
#h2{
background-color: rosybrown;
}
1.4 查找子孫元素
查找子孫元素，那么在子孫元素直接有一個空格。示例代碼如下：
#info li{
background-color: orangered;
}
1.5 查找直接子元素
查找直接子元素，那么要在父子元素中間有一個>，示例代碼如下：
#info > li{
background-color: orangered;
}
1.6 根據屬性查找
根據屬性的名字進行查找，那么應該先寫標簽名字，然后在括號中寫屬性的值。示例代碼如下：
input[name="username"]{
background-color: dodgerblue;
}
2.實戰演練：select和css選擇器提取元素
下面使用到的"前程無憂"對應的代碼來自於【Python3 爬蟲】U11_BeautifulSoup4庫提取數據詳解
2.1 獲取所有的p標簽
from bs4 import BeautifulSoup
html = "前程無憂"
soup = BeautifulSoup(html,'lxml')
ps = soup.select('p')
for p in ps:
print(p)
print('=' * 40)
2.2 獲取第2個p標簽
from bs4 import BeautifulSoup
html = "前程無憂"
soup = BeautifulSoup(html,'lxml')
p = soup.select('p')[1]
print(p)
2.3 獲取所有class等於t3的span標簽
from bs4 import BeautifulSoup
html = "前程無憂"
soup = BeautifulSoup(html,'lxml')
spans = soup.select(".t3") #也可以直接寫spans = soup.select(".t3")
# 也可以寫為：spans = soup.select("span[class='t3']")
for span in spans:
print(span)
2.4 獲取class為t1的p標簽下的所有a標簽的href屬性
from bs4 import BeautifulSoup
html = "前程無憂"
soup = BeautifulSoup(html,'lxml')
aList = soup.select("p.t1 a")
for a in aList:
href = a['href']
print(href)
2.5 獲取所有的職位信息(文本)
from bs4 import BeautifulSoup
html = "前程無憂"
soup = BeautifulSoup(html,'lxml')
divs = soup.select('div')
infoSet = list()
for div in divs:
info = {}
infos = list(div.stripped_strings) # div.stripped_strings返回的是一個生成器
info['job'] = infos[0]
info['company'] = infos[1]
info['address'] = infos[2]
info['salary'] = infos[3]
info['ReleaseDate'] = infos[4]
infoSet.append(info)
print(infoSet)