CSS Selector¶

Da-Wei Chiang¶

大綱¶

什麼是DOM？
選擇器
- 基本設定方式
- 選擇器的注意事項
- 全選擇器
- 類別選擇器
- id選擇器
- 多重選擇器
- 子選擇器
- 相鄰兄弟選擇器
- 直屬選擇器
- 同層選擇器
- 屬性選擇器
- 虛擬選擇器
Selector Gadget介紹
Beautiful Soup使用CSS Selector

什麼是ＤＯＭ？¶

什麼是選擇器？¶

從網頁中的所有標籤挑選出預設定CSS的標籤

範例¶

<ol>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
 </ol>

如何想辦法抓取第二個li就是選擇器的功用，嘗試讓two變為紅色字.

樣式表設定方式¶

tag name {
    attribute name: value;
}

範例¶

li  <!--tag name(選擇器)-->
{
    color:red;   <!--color為屬性名稱，red為設定值-->
}

我們會發現所有 li 下面的文字都變紅了，這個選擇器依舊無法達成我們要的需求(只有第二個li字體變紅)。因此我們需要學習其他選擇器

練習¶

自行建置一個網頁架構
使用選擇器設定自己顏色

選擇器的注意事項¶

設定值會向下傳播如：

<!--html結構-->
<div>
  <p>
      CSS <span>Hello World</span>
  </p>
</div>

<!--css設定-->

div {
    color:red;
}

選擇器的注意事項¶

上述的網頁結構我們可以寫為 div -> p -> span
div { color:red; }會導致p、span繼承div的設定，因此全部文字皆為紅色

全選擇器¶

要選擇所有的標籤使用 *

範例¶

設定所有標籤的文字大小

* {
    font-size:18px;
}

類別選擇器¶

替標籤分類，在html中替想分類的標籤增加class屬性
設定方式：點類別名稱

範例¶

假定已經替所要設定的標籤加入class屬性名為class1與class2，共兩類
分別替兩類設定css

.class1 {
    color:red;
}

.class2 {
    color:green;
}

練習¶

產生兩個div區塊的網頁結構
第一個區塊字體為紅色、第二個區塊字體為藍色
所有字體大小(font-size)設為16px;

id選擇器¶

替標籤加上id，id是唯一值。一個html只會有唯一一個id名稱
設定方式 #id名稱

範例¶

<a id="title_one" href="...">hello world</a>

#title_one {
    color:red;
}

練習(同一個練習，改為id選擇器)¶

產生兩個div區塊的網頁結構
第一個區塊字體為紅色、第二個區塊字體為藍色
所有字體大小設為16px;

多重選擇器¶

如果一次想設定多個不同標籤，可使用多重選擇器一次設定
設定方式：將要設定的多個標籤、類別或id以逗點隔開

範例¶

<h1>this is h1</h1>
<a id="title1" href="...">one</a>
<a id="title2" href="...">two</a>
<a id="title3" href="...">three</a>
<span>this is span</span>

h1, #title2, span {
    color:red;
}

猜猜看結果如何¶

<h1>this is h1</h1>
<a id="title1" class="a_class" href="...">one</a>
<a id="title2" class="a_class" href="...">two</a>
<a id="title3" class="a_class" href="...">three</a>
<span>this is span</span>

h1, #title2, span {
    color:red;
}

.a_class{
    color:green;
}

猜猜看結果如何¶

<h1>this is h1</h1>
<a id="title1" class="a_class" href="...">one</a>
<a id="title2" class="a_class t_class" href="...">two</a>
<a id="title3" class="a_class" href="...">three</a>
<span>this is span</span>

h1, span {
    color:red;
}
.t_class{
    color:red;
}
.a_class{
    color:green;
}

練習¶

建構一個網頁架構
練習使用多重選擇器

子選擇器¶

抓取父標籤下所有選擇的子標籤
設定方式：父標籤子標籤

範例¶

<div>
    <h1><span><a href="...">div h1 span a</a></span></h1>
    <a href="...">div a</a>
    <ul>
        <li><a href="...">div ul li a</a></li>
    </ul>
</div>

div a {
    color:red;
}

練習¶

建構一個網頁架構
練習使用多重選擇器

相鄰兄弟選擇器¶

選擇剛好在左邊標籤下的標籤
設定方式：標籤＋標籤

範例¶

<span><a href="...">span a</a></span>
<a href="...">first a</a>
<a href="...">second a</a>

span+a {
    color:red;
}

練習¶

建構一個網頁架構
練習使用相鄰兄弟選擇器

直屬選擇器¶

指定標籤下的特定標籤
設定方式：標籤 > 標籤
注意：直屬選擇器與子選擇器的差異是有沒有直屬概念

範例¶

<div class="div_box">
    <p>.div_box p</p>
    <div class="div_containbox"> 
        <p>.div_containbox p</p>         
    </div>
    <p>.div_box p</p>
</div>

.div_box>p{
    color:red;
}

練習¶

建構一個網頁架構
練習使用直屬選擇器

同層選擇器¶

抓取某標籤之後的所有標籤
設定方式：標籤～標籤
注意：同層選擇器與相鄰兄弟選擇器的差異是同層選擇器較沒有相鄰兄弟選擇器嚴謹

範例¶

<span><a href="...">span a</a></span>
<a href="...">first a</a>
<a href="...">second a</a>

span~a{
    color:red;
}

練習¶

建構一個網頁架構
練習使用同層選擇器

屬性選擇器¶

依據標籤的屬性抓取特定標籤

設定方式：

標籤[屬性]         <!--具有某個屬性-->
標籤[attribute = "value"]   <!--具有某屬性且具有某屬性值-->
標籤[attribute ~= "value"]   <!--包含某個屬性值（以空白分格）-->
標籤[attribute $= "value"]   <!--以某屬性值為結尾的屬性-->
標籤[attribute *= "value"]   <!--包含某屬性質的屬性-->
標籤[attribute ^= "value"]   <!--以某屬性值為開頭的屬性-->

範例¶

<span class="first_span"><a id="test" href="www.google.com.tw">google</a></span><br/>
    <a href="www.yahoo.com" class="">yahoo</a><br>
    <a href="www.pchome.com">pchome</a><br>
    <span class="first_span">first span</span><br/>
    <span class="second_span">second span</span><br>
    <span title="this is span">this is span</span>

a[href ^= "www"] { color:red;}
a[href $= "com"] { color:pink;}
span[class*="span"] { color:peru;}
[title~="span"] { color:purple;}

練習¶

建構一個網頁架構
練習使用屬性選擇器

虛擬選擇器¶

以特定形式抓取所需的標籤

較常用的虛擬選擇器

:first-child
:last-child
:only-child
:nth-child(n)

其他虛擬選擇器

範例¶

<p>only p</p>
    <div>
        <p>div > first p</p>
        <p>div > second p</p>
    </div>
    <div>
        <p>div > only p</p>
    </div>
    <ol>
        <li>one</li>
        <li>two</li>
    </ol>

p:first-child{ color:red;}
p:last-child{ color:blue;}
p:only-child{ color:orange;}
li:nth-child(2){ color:red;}

練習¶

建構一個網頁架構
練習使用虛擬選擇器

總練習¶

CSS Selector Game

`Selector Gadget + Chrome Console`¶

安裝及使用`Selector Gadget`¶

使用`Chrome`開發人員工具`Console`¶

確認抓取標籤內容

document.querySelector("css Selector")
document.querySelectorAll("css Selector")

querySelectorAll取值

querySelectorAll("css Selector")[index].firstChild.nodeValue

練習¶

使用Selector Gadget抓取鬼滅之刃所有卡斯清單
使用Console確認抓取清單細項

`BeautifulSoup`使用`CSS Selector`¶

beautifulsoup物件或tab物件皆可使用css selector抓取元素，使用函數如下

select()
select_one()  #只抓取符合的第一筆

注意：該函數並不支援nth-...,需將其改為nth-of-type()

In [5]:

# 範例

import requests
from bs4 import BeautifulSoup

response = requests.get('https://www.imdb.com/title/tt1877830/fullcredits?ref_=tt_cl_sm')
bts = BeautifulSoup(response.text, 'lxml')
css_select = bts.select('.subpage_title_block__right-column .header , .parent a')  # 抓取標題名稱
for i in css_select:
    print(i.get_text())

蝙蝠俠
Full Cast & Crew

練習¶

請抓取玩命關頭9卡斯清單

並存於字典之中，如下

{'玩命關頭9': [' Vin Diesel', ' Michelle Rodriguez', ' Jordana Brewster', ' Tyrese Gibson', ' Ludacris', ' Nathalie Emmanuel', ' Charlize Theron', ' John Cena', ' Finn Cole', ' Sung Kang', ' Anna Sawai', ' Helen Mirren', ' Kurt Russell', ' Lucas Black', ' Shad Moss', ' Thue Ersted Rasmussen', ' Don Omar', ' Shea Whigham', ' Vinnie Bennett', ' JD Pardo', ' Michael Rooker', ' Jim Parrack', ' Siena Agudong', ' Isaac Holtane', ' Immanuel Holtane', ' Azia Dinea Hale', ' Juju Zhang', ' Karson Kern', ' Igby Rigney', ' Sophia Tatum', ' Francis Ngannou', ' Martyn Ford', ' Bad Bunny', ' Jimmy Lin', ' Jason Tobin', ' Cardi B', ' Cered', ' Ozuna', ' Oqwe Lin', ' Bill Simmons', ' Vincent Sinclair Diesel', ' Luka Hays', ' Melanie Beiler', ' Dzenita Bijavica', ' Janice Blue', ' Sophia Bui', ' Miranda Chambers', ' Méghane De Croock', ' Jean Donnay', ' Patrick Doran', ' Lex Elle', ' Albert Giannitelli', ' Anthony A. Gonzalez', ' Miraj Grbic', ' Elizabeth Haley', ' Tony Holness', ' Rob Horrocks', ' Michelle Marie Jacquot', ' Joy A. Kennelly', ' Jae Kim', ' Mark Krenik', ' Lucas Krystek', ' Laurine Lambert', ' Jorge Leon', ' Lorin Alond Ly', ' Ryan James Mack', ' Johnny Mansbach', ' Humberto Martinez', ' Kenny-Lee Mbanefo', ' Terry McGinnis', ' Adrian Mozzi', ' Aaron Olatunjie', ' Amber Pauline', ' Donnie Saylor', ' Demitra Sealy', ' Ginta Sebre', ' Amber Sienna', ' Jimmy Star', ' Jason Statham', ' Brian Torres', ' Ella Walker', ' Valeria Zunzun']}

CSS Selector¶

Da-Wei Chiang¶

大綱¶

什麼是ＤＯＭ？¶

什麼是選擇器？¶

範例¶

樣式表設定方式¶

範例¶

練習¶

選擇器的注意事項¶

選擇器的注意事項¶

全選擇器¶

範例¶

類別選擇器¶

範例¶

練習¶

id選擇器¶

範例¶

練習(同一個練習，改為id選擇器)¶

多重選擇器¶

範例¶

猜猜看結果如何¶

猜猜看結果如何¶

練習¶

子選擇器¶

範例¶

練習¶

相鄰兄弟選擇器¶

範例¶

練習¶

直屬選擇器¶

範例¶

練習¶

同層選擇器¶

範例¶

練習¶

屬性選擇器¶

範例¶

練習¶

虛擬選擇器¶

範例¶

練習¶

總練習¶

Selector Gadget + Chrome Console¶

安裝及使用Selector Gadget¶

使用Chrome開發人員工具Console¶

練習¶

BeautifulSoup使用CSS Selector¶

練習¶

`Selector Gadget + Chrome Console`¶

安裝及使用`Selector Gadget`¶

使用`Chrome`開發人員工具`Console`¶

`BeautifulSoup`使用`CSS Selector`¶