CSS權重(specificity):熟悉這6個樣式級別,讓你的樣式被採用

CSS權重熟悉這6個樣式級別,讓你的樣式被採用

人類生而不平等,CSS樣式也是。

CSS全名為「Cascading Stylesheets,階層樣式表」,名稱中的階層(Cascading)便明白的告訴你,樣式們是有層級的,有階級的,樣式是不平等的。

如果將CSS擬人化,CSS世界內的樣式們可分為6種階級,階級高的樣式權重大,瀏覽器優先採用,階級低的樣式權重小,則會被覆蓋掉,無法嶄露頭角。

CSS權重的英文是specificity,直譯過來是獨特性,也有人稱之為優先級,本文統一以「權重」稱之,取其權力比較大,重要性比較高的含義。

CSS組合選擇器:5個選擇器符號功用介紹

CSS組合選擇器:5個選擇器符號功用介紹

CSS選擇器,是讓你設計的樣式可以套用到HTML上的重要工具,瞭解選擇器中的逗號、空格、加號等符號能讓你更加靈活運用選擇器。

選擇器的存在,就好像讓HTML與CSS檔案由原本兩個不同頻率的人,在選擇器的協助下得以到同一個頻道上,彼此溝通,相互合作。讓HTML中的標籤知道去CSS檔案中的哪個地方套取樣式 ; CSS檔案檔案中的樣式,也知道樣式們要各自放到哪個HTML標籤去。

當你學會基本的元素選擇器(element selector)、類別選擇器(class selector)、ID選擇器(ID selector),準備一展身手,好好的運用CSS在網頁上時,你可能會發現,咦,選擇器怎麼好像有點複雜,那些逗號、空格及其它讓人困惑的符號是怎麼一回事?

就讓本文為你解惑,帶你一探CSS選擇器中的逗號空格、>、~、+符號功用,還有怎麼閱讀選擇器可以讓你不再迷失在選擇器大海中。

4個步驟認識CSS基礎操作與選擇器

CSS基礎

CSS是程式語言嗎?

不是喔,CSS是風格頁面語言(style sheet language),全名是 「 Cascading Stylesheets 」 ,中文翻譯為「階層樣式表」,要讓網頁變漂亮、吸引人,呈現你期望的排版、樣式,使用CSS就對了!

CSS的功能就是以各種樣式來美化網頁,就好像你有了一間未裝潢新成屋,網頁想要變美,就需要找CSS來裝潢。

學CSS便是要學習怎麼讓CSS與HTML搭配,用CSS裝潢網頁,製作出美觀頁面。所以學習CSS前你需要有HTML的基礎,因為每個要被美化的東西都是HTML標籤,看不懂HTML就要先學CSS你會覺得很混亂,甚至根本就看不懂。

還不懂HTML?想要瞭解或喚起對HTML的記憶,可以閱讀《Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構》、《15個常用的HTML標籤與屬性基本介紹》這兩篇文章。

本文以4個步驟說明CSS基礎,在瞭解CSS如何與HTML搭配後,接著說明CSS的語法規則、屬性,讓你學會CSS基本操作,並認識CSS選擇器是什麼。

15個常用的HTML標籤與屬性基本介紹

15個常用的HTML標籤與屬性基本介紹

在《Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構文章中,我們概要的認識了網頁的架構,知道<!DOCTYPE html>是宣告,功能是讓瀏覽器知道這是HTML,也知道網頁的架構就是由<html></html>、<head></head>、<body></body>三個大標籤(tags)所構成,分別表示網頁的工作範疇。

接著我們來簡單認識幾個常用的HTML標籤,及弄懂屬性(attributes)是什麼東西,知道怎麼使用常用的HTML標籤及屬性後,便可以運用基礎的知識,學習CSS,讓你具備架構網頁的知識與也知道如何設定選擇器(selectors),讓Python爬蟲來找尋你需要的資訊。

需要買日本藥妝?使用DOKODEMO日本代購幫你1次便宜買齊

DOKODEMO日本代購

因為鼻塞整夜睡不好,真的很需要AG抗過敏鼻炎噴霧(AG Nose Allercut series,AG 鼻噴劑)!

4月28日凌晨向日本的店家下訂2瓶30ml的AG鼻噴劑EVE止痛藥,5月5日就收到從日本飛過來的商品了,比預期的還要快。

由於疫情的關係,無法到日本購買日本當地才有賣的藥品,儘管唐吉軻德進駐西門町,在台灣想買特定的日本藥品,還是買不到(違法在網拍販賣的就不考慮了,而且商品介紹圖片還是簡體字,存有疑慮),當你特別依賴某個鼻噴劑的時候,好像就只能循代購管道購買。

就在苦惱噴鼻劑用完,鼻塞睡不著的時候,爬文一陣子遍尋鼻噴劑購買管道,終於,找到DOKODEMO日本代購,有賣!!!