技術 :disabled & :enabled 表單元素啟用與禁用的完美搭配

之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disa...

技術 :not 不選擇的藝術，如何用 CSS 控制排除

:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定...

技術 :empty 無聲的存在，掌控隱形的頁面空間

如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。 💠:empty 基本用法 語法 選擇器:empty { 屬性...

技術 :only-child & :only-of-type 讓唯一的元素成為焦點

:only-child 選擇器可以用於選中在父元素中唯一的子元素，用白話來說就是獨生子女元素，常用在只有一個子元素時，可以為該唯一的元素添加特殊的樣式。同樣地...

技術 :nth-last-child & :nth-last-of-type 從後數起！CSS 的倒數計算法

前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於...

技術 :first-of-type & :last-of-type 第一與最後的類型元素

在之前的文章中，我們介紹過 :first-child & :last-child 這兩個選擇器，可以用來選中第一個或最後一個元素。但本篇要介紹的 :f...

技術 相鄰兄弟選擇器-兄弟情深，只挑最近的！

相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。 想像一下，家裡有大哥、二...

技術 子代選擇器-鎖定直系血親，選擇不含糊

子代選擇器（Child Combinator）用於選中指定元素中的直接子元素。與後代選擇器不同，子代選擇器只會選擇直接子元素，而不包括更深層次的後代元素。 如...

技術 後代選擇器-傳承的力量，輕鬆選中後代元素

後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素...

技術 交集選擇器-一次選擇，多重考量

接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次...

技術 通用選擇器-小朋友才做選擇，我全都要

通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。通用選擇器可以使用 * 符號來選取所有元素...

技術 Day13. 切版前知識(三) CSS介紹、選擇器、常用屬性

嗨～從今天開始是一系列的CSS內容，前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁，並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀，Ja...

技術 Day09 CSS之夾娃娃機， 選擇器Selector是什麼？

某次Code Review學長對我說，你知道選擇器嗎？我說大概知道。他說你要能夠做到我指哪個你就可以選到哪個，所以他就隨意指個地方，問我『你要怎樣才能選得到？』...

技術 [快速入門前端 18] CSS 選擇器的權重

選擇器的優先順序 當我們使用多個選擇器選中同個元素，並賦予某個屬性不同值時，就會產生樣式衝突。舉例來說，當我們在 A 選擇器將元素的顏色設為紅色，又用 B 選擇...

技術 [快速入門前端 17] CSS 選擇器 (7) 選擇器總結

基本選擇器 選擇器 說明 語法 通配符 作用範圍為所有標籤，用於頁面整體樣式 * { color: red } 元素 作用於同種標籤，不能進行...

技術 [快速入門前端 14] CSS 選擇器 (4) Pseudo-Classes 偽類 - 結構偽類

結構偽類 結構偽類是指針對 HTML 結構來選擇元素進行樣式設定，從而減少對 Class 的依賴，尤其是在表格、表單等排列順序會變動的元素中。例如當我們想利用...

技術 [快速入門前端 11] CSS 選擇器 (2) 複合選擇器 — 交集和併集

複合選擇器 複合選擇器是指由兩個或多個基礎選擇器組合而成的選擇器，複合選擇器的種類很多，常見的有子選擇器、併集選擇器、偽類等等，那接下來就讓我們一一介紹這些選擇...

技術 [快速入門前端 10] CSS 選擇器 (1) 基本選擇器 — 通配符、元素、類別 Class、id、屬性

CSS 選擇器 選則器的功能在於讓瀏覽器知道樣式要套用在哪個或哪些元素中，主要依據選擇器的複雜程度分為基本選擇器和複合選擇器。本篇我們會介紹常用的基本選擇器，主...

技術 [菜鳥筆記] CSS 選擇器

CSS 選擇器 CSS 選擇器怎麼用? 有哪些? 每次都被CSS選擇器多種變化搞得頭昏腦脹不然就是忘記如何將querySelector選中的節點裡的所有子元素選...

技術 建構HTML的按鈕容器

雖然在JSXGraph中可以輕易建立button、chebox、label…等元件，但是這些元件會在畫板內，因此排版並不方便，也會干擾幾何元素的呈現。今天我們將...