有了 Stylish,我們可以很簡單地把核心的要辨識的部分,製作一個固定的格式給不同的網站使用,這樣一來我們的網站辨識核心就可以不用常常會因為要辨識不同的網站而進行更改,或是只要進行少量的更動便可以將新的網站加入我們的辨識系統裡面!
說了這麼多就是要介紹 CSS 的 Selector,它的種類繁多,以下一一對各位做個介紹:
基本的語法:
選擇器 { 屬性:設定值;}對照 w3schools 的語法簡介:
選擇器其種類大約分成以下幾種:
- Element selectors
- ID selectors
- Class selectors
- Grouping Selectors
- Universal selector
- Attribute selectors
- Descendant combinator
- Child combinator
- Adjacent sibling combinator
- General sibling combinator
- Pseudo-classes
- Pseudo-elements
w3schools 有簡單的介紹和影片可以參考:CSS Selectors:
影片介紹包含了 1 ~ 4 種 selector,但是很不幸的,光是學會這四種並不能解決我們的問題,因為常見的問題是:不同的版面排版的關係,並不是單獨對 Element、ID 或是 Class 作變更就足夠的,因為通常還會與其它的 Element、ID 或是 Class 有一些交互參照關係!
在這種時候就是 6 ~ 12 這 7 種 selector 的使用情境了!而且很不幸的是這種狀況還蠻常發生的,所以使用 Stylish 必學啊!
那沒提到的那一種是怎麼回事?是指 5 嗎? 因為這種與 1 ~ 4 種的 Selector 類似,5是以"*"來套用到所有的 Element、ID 或是 Class ,實務上也用不太到,就先跳過吧!
下面針對 6 ~ 10 種 selector 簡單介紹一下:
6. Attribute selectors:
用來針對有使用特定屬性的 Element 做 CSS 設定。
Element[att] //用於含 att 屬性的 Element 標籤 Element[att=val] //用於 att 屬性值為 val 的 Element 標籤 Element[att~=val] //用於 att 屬性值包含 val 的 Element 標籤
7. Descendant combinator:
Element1 Element2 //用空白區隔兩個 Element,表示在 Element1 內的 Element2 才會使用。Element2 同一層關係的前面可以允許有其他 Element 插入!
8. Child combinator:
Element1 > Element2 //用大於來分隔兩個元素,表示在 Element1 內的 Element2 才會使用。但與 7 不同的是 Element1 及 Element2 元素之間不能有其它的 Element 插入喔!表示一種絕對的關係!
9. Adjacent sibling combinator:
Element1 + Element2 //用加號分隔兩個元素,表示在 Element1 同一層關係的相鄰 Element2 才會套用。
10. General sibling combinator:
Element1 ~ Element2 //用蟲蟲符號區隔兩個元素,表示在與 Element1 同一層關係的 Element2 全部都會被套用。
11. Pseudo-classes:
12. Pseudo-elements:
這兩種目前沒研究,我實務上還沒遇到要用到這兩種來協助辨識網頁的,暫時先跳過,等以後有用到了再來跟大家一起研究!