css選擇器怎麼寫

CSS選擇器是用來在HTML文件中選擇元素的模式。它們包括元素選擇器、類別選擇器、ID選擇器、通配符選擇器和後代選擇器。選擇器的語法為選擇器名稱、操作符和值。操作符包括#（ID選擇器）、.（類別選擇器）和*（通配符選擇器）。當多個選擇器應用於相同元素時，最具體的（最長的）選擇器將優先。進階選擇器包括相鄰選擇器、子元素選擇器、偽類選擇器和偽元素選擇器，可以更精確地選擇元素。

CSS選擇器編寫指南

#什麼是CSS選擇器？

CSS選擇器是用來在HTML文件中選擇特定元素的模式。

選擇器類型

• 元素選擇器：選擇特定類型的元素，如<div>或<code><p></p>.
• 類別選擇器：選擇具有特定CSS類別名稱的元素，如.my-class.
• ID選擇器：選擇具有特定ID屬性的元素，例如#my-id.
• 通配符選擇器：選擇所有元素，如*.
• 後位選擇器：選擇某個祖先元素的子孫元素，如div p.

選擇器語法

選擇器由三個主要部分組成：

• 選擇器名稱：指定元素類型或屬性
• 運算元：通常用於指定特定條件
• #值：選擇器的特定值

選擇器的運算子

• : - 指定類別選擇器
• # - 指定ID選擇器
• .: 指定通配符選擇器

選擇器的級聯

當多個選擇器應用於相同元素時，最具體的（最長的）選擇器將優先。

範例

• #my-id - 選擇具有ID屬性為「my-id」的元素
• .my-class - 選擇具有CSS類別名為「my-class」的元素
• div p - 選擇所有<div>元素的子孫<code><p></p>元素
• * - 選擇所有元素

進階選擇器

除了基本選擇器類型外，CSS還支援進階選擇器：

• # 相鄰選擇器（ ）： 選擇緊接在另一個元素之後的元素，如p h1
• 子元素選擇器（>）：選擇一個元素的直接子元素，如div > p
• 偽類選擇器：根據元素的狀態或行為進行選擇，如:hover
• #偽元素選擇器：選擇元素的特定部分，例如::after

透過瞭解這些選擇器及其使用，您可以有效地選擇HTML文件中的元素以進行樣式設定。