Lala Code

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

發表於 2024-10-19 分類於 CSS Disqus：

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

閱讀全文 »

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

發表於 2024-10-18 分類於 CSS Disqus：

後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素應用相同的樣式時，它非常實用。

閱讀全文 »

Day8-選擇器列表-多重選擇，一次完成！

發表於 2024-10-17 分類於 CSS Disqus：

選擇器列表（Selector List），又稱「分組選擇器」或「並集選擇器」，允許多個選擇器共享相同的樣式。

閱讀全文 »

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

發表於 2024-10-16 分類於 CSS Disqus：

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

閱讀全文 »

Day6-屬性選擇器-尋找標籤中的屬性

發表於 2024-10-15 分類於 CSS Disqus：

屬性選擇器（Attribute Selectors）用於選中符合屬性值條件的 HTML 元素，HTML 元素上會有一些屬性，例如 <a> 標籤有 title 屬性，我們就可以針對有 title 屬性的 <a> 元素來進行樣式設置。

閱讀全文 »

Day5-ID 選擇器-僅此一家，別無分號

發表於 2024-10-14 分類於 CSS Disqus：

ID 選擇器（ID Selectors）是根據元素上的 id 屬性值作為判斷依據，大小寫需相符。

id 其實就是「身分 Identity」的縮寫，同一個 id 只能在頁面中出現一次，這就像我們每個人的身分證字號，都是唯一的。

閱讀全文 »

Day4-類選擇器-前端切版最常使用的選擇器，精準鎖定

發表於 2024-10-12 更新於 2024-10-14 分類於 CSS Disqus：

上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！

類選擇器（Class Selectors）是前端切版最常使用到的選擇器，根據 HTML 元素的 class 屬性值來選擇特定的元素，其中 class 就有「類別」的含義。

閱讀全文 »

Day3-元素選擇器-誰說標籤只是標籤

發表於 2024-10-11 分類於 CSS Disqus：

元素選擇器（Type Selectors）也可以稱作「標籤選擇器」。我們可以在 HTML 文件中，選擇任何的 HTML 元素，並對選中的標籤元素來處理樣式。不過，由於 <head> 部分的標籤（如 <meta>, <title> 等）不會顯示在網頁的可見區域，因此對這些標籤的樣式設置不會產生效果。

閱讀全文 »