之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disa...
:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定...
如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。 💠:empty 基本用法 語法 選擇器:empty { 屬性...
:only-child 選擇器可以用於選中在父元素中唯一的子元素，用白話來說就是獨生子女元素，常用在只有一個子元素時，可以為該唯一的元素添加特殊的樣式。同樣地...
前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於...
在之前的文章中，我們介紹過 :first-child & :last-child 這兩個選擇器，可以用來選中第一個或最後一個元素。但本篇要介紹的 :f...
相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。 想像一下，家裡有大哥、二...
子代選擇器（Child Combinator）用於選中指定元素中的直接子元素。與後代選擇器不同，子代選擇器只會選擇直接子元素，而不包括更深層次的後代元素。 如...
後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素...
接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次...
通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。通用選擇器可以使用 * 符號來選取所有元素...
嗨～從今天開始是一系列的CSS內容，前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁，並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀，Ja...
某次Code Review學長對我說，你知道選擇器嗎？我說大概知道。他說你要能夠做到我指哪個你就可以選到哪個，所以他就隨意指個地方，問我『你要怎樣才能選得到？』...
選擇器的優先順序 當我們使用多個選擇器選中同個元素，並賦予某個屬性不同值時，就會產生樣式衝突。舉例來說，當我們在 A 選擇器將元素的顏色設為紅色，又用 B 選擇...
基本選擇器 選擇器 說明 語法 通配符 作用範圍為所有標籤，用於頁面整體樣式 * { color: red } 元素 作用於同種標籤，不能進行...
結構偽類 結構偽類是指針對 HTML 結構來選擇元素進行樣式設定，從而減少對 Class 的依賴，尤其是在表格、表單等排列順序會變動的元素中。例如當我們想利用...
複合選擇器 複合選擇器是指由兩個或多個基礎選擇器組合而成的選擇器，複合選擇器的種類很多，常見的有子選擇器、併集選擇器、偽類等等，那接下來就讓我們一一介紹這些選擇...
CSS 選擇器 選則器的功能在於讓瀏覽器知道樣式要套用在哪個或哪些元素中，主要依據選擇器的複雜程度分為基本選擇器和複合選擇器。本篇我們會介紹常用的基本選擇器，主...
CSS 選擇器 CSS 選擇器怎麼用? 有哪些? 每次都被CSS選擇器多種變化搞得頭昏腦脹不然就是忘記如何將querySelector選中的節點裡的所有子元素選...
雖然在JSXGraph中可以輕易建立button、chebox、label…等元件，但是這些元件會在畫板內，因此排版並不方便，也會干擾幾何元素的呈現。今天我們將...
iThome鐵人賽
看影片追技術
看更多
Lala Code
luna0228
Jessie
olddunk