昨天已經有介紹CSS了，今天我們就來談談它的語法吧!

CSS選擇器語法有CSS Level1 、CSS Level2 和 CSS Level3三個版本，
下面就來講講不同選擇器版本的語法和範例說明。

CSS Level1

CSS Level1選擇器 | 範例 | 範例說明
------------- | -------------
.class | .test | 樣式類別選擇器，選取所有class=”test”的元素
#id | #name | Id屬性選擇器，選取id=”name”的元素
element | p | 型態選擇器，選取所有p元素
element，element | div，p | 群組選擇器，選取所有div元素和所有p元素
element element | div p | 子孫選擇器，選取所有是div子孫的p元素，不只父子，所有子孫都符合

CSS Level2

CSS Level2選擇器 | 範例 | 範例說明
------------- | -------------
element > element | div> p | 父子選擇器，選取所有父元素是div元素的p子元素
element + element | div+p | 兄弟選擇器，選取所有緊接著div元素之後的p兄弟元素
[attribute] | [count] | 選取所有擁有count屬性的元素
[attribute=value] | [target=_blank] | 選取所有擁有target=”_blank”屬性的元素
:focus | input:focus | 選取取得焦點的input元素

CSS Level3

CSS Level3選擇器 | 範例 | 範例說明
------------- | -------------
element1~ element2 | p~ul | 選取所有之前是p元素的ul兄弟元素
attribute^=value | a[src^=”https”] | 選取所有a元素的src屬性值是”https”開頭
:first-of-type | p:first-of-type | 選取所有是第一個p子元素的p元素
:last-of-type | p:last-of-type | 選取所有是最後一個p子元素的p元素
:onlyt-of-type | p:only-of-type | 選取所有是唯一p子元素的p元素

Pseudo元素

CSS的Pseudo元素(Pseudo-elements)是使用::符號開頭，用來樣式化HTML元素的部分內容。
Pseudo元素 | 範例 | 範例說明
------------- | -------------
::after| p::after | 在每一個p元素的內容後插入一些東西
::before | p::before | 在每一個p元素的內容前插入一些東西
::first-letter | p::first-letter | 選取每一個p元素的第一個字母
::first-line | p::first-line | 選取每一個p元素的第一行
::selection | p::selection | 選取被使用者在p元素選取的部分內容

今天的分享就先到這邊啦!我們明天見~

書籍參考資料：

文科生也可以輕鬆學習網路爬蟲