Michael Zippo
CSS 選擇器允許 Web 開發人員為網頁上的特定元素或元素集設置樣式。
使用選擇器時，您可能決定僅針對具有特定屬性的元素。這就是 CSS 屬性選擇器的用武之地。屬性選擇器可幫助您將某些樣式僅應用於具有特定屬性的元素。
本教程介紹瞭如何在設置元素樣式時使用 CSS 屬性選擇器。在本教程結束時，您將對使用屬性選擇器定義元素有一個很好的理解。
在 HTML 中，屬性用於定義附加元素的特徵或屬性。例如，height 屬性定義圖像的高度，title 屬性定義 Web 元素的標題。
使用名稱/值對結構聲明屬性。這意味著像這樣的屬性將出現在 HTML 文件中：name = "value"。要了解有關 HTML 屬性的更多信息，請閱讀我們的 HTML 屬性指南。
在設計網站時，您可能希望根據元素的屬性值來設置元素的樣式。為此，您可以使用 CSS 屬性選擇器。
使用屬性選擇器時要遵循的兩個步驟是：
讓我們探索一些 CSS 屬性選擇器的例子。
選擇器屬性最基本的形式是：[attribute]。換句話說，將屬性的名稱括在方括號中。
假設我們要將每個具有 title 屬性的元素的字體大小設置為 16px。我們可以使用以下代碼：
我們的 CSS 規則代碼只適用於具有 title 屬性的元素。任何指定了 title 屬性的元素的字體大小，無論該屬性存儲的值如何，都將根據上述規則更改為 16px。
你可以讓你的通過指定以下一項或兩項來獲得更精確的屬性選擇器：
例如，假設您要設置段落中所有文本的大小標題為 16 像素。您可以使用以下代碼執行此操作：
選擇器屬性開頭的字母p告訴瀏覽器僅將字體樣式應用於標籤.選擇器的 [title] 部分告訴瀏覽器僅將策略樣式應用於具有指定 title 屬性的
標籤。
T 所以在閱讀完這段代碼後，瀏覽器會將所有段落標題（p）的字體大小轉換為 16px。此代碼不會影響頁面上的任何其他文本。
[attribute = "value"] 屬性選擇器允許程序員僅將樣式應用於元素。屬性，其值，Äã，Äã 等於選擇器中指定的值。
假設我們要將 Python.Engineering 主頁上所有鏈接的背景顏色設置為橙色。此樣式應將 a 元素的背景顏色設置為橙色。我們可以使用以下 CSS 代碼執行此操作：
此規則選擇網頁上所有 href 屬性等於 python.engineering 的 元素。然後將所有這些元素的背景顏色設置為橙色。
[attribute ~ = & ldquo 選擇器; value "] 允許您選擇屬性值為 ‚Äã‚Äã 且包含特定單詞的元素。
例如，假設您想將樣式應用於所有 p 元素，其標題對應於單詞 blue。對於這種樣式，這些元素的文本顏色必須更改為藍色。
我們可以使用執行此操作的以下規則：
這條規則會找到所有與標題相關的標籤
包含單詞“blue”，並定義這些標籤中文本的顏色
blue。所以，如果一個
標籤有標題color blue或color blue，這個樣式會被應用。但是，這個規則不是 應用於標題為 blueColor 的
標籤，因為 b lue 這個詞在屬性中不是獨立存在的。
這不同於* = 選擇器，不僅可以找到屬性中的特定單詞，還可以找到屬性中的特定值。
[屬性| = "value"] 選擇器允許您選擇屬性以某個值開頭的元素（例如，“Top”）。這包括屬性以指定值開頭並包含連字符後跟附加文本（例如，“top-style”和其他“top-”值）的元素。請注意，代碼需要在單詞“”之後使用豎線 (|) Class.,"
例如，假設您要為每個 top，包括後跟其他值的那些，用連字符分隔。您可以使用以下代碼：
此規則將在每個
需要注意的是，指定的值必須是一個完整的單詞或一個單詞後跟一個連字符。換句話說，我們上面的樣式將應用於具有類名 top style 和 top-style 的 元素name topstyle.
[attribute ^ = & ldquo 選擇器； value ‚"] 用於選擇屬性值以特定值開頭的元素。指定值不必是整個單詞，不像 [attribute | = "value"] 我們之前討論過。
假設我們要為每個具有以 paddingBottom 開頭的類屬性的
用戶的瀏覽器會將我們定義的padding-bottom樣式應用到所有類名以“paddingBotto”開頭的
L`操作符$ = 用於選擇所有屬性值以某個值結尾的元素。例如，假設您想將所有超文本的文本顏色更改為灰色，這些超文本的 href 屬性值以 .app 結尾。您可以使用以下代碼執行此操作：
此選擇器將應用於您網頁的所有 元素，其 href 值為 ,Äã,Äã 以 .app 結尾。
操作符 * = 允許您選擇所有元素，其值 ,Äã,Äãd `屬性包含特定價值。與 ~= 運算符不同的是，這個屬性選擇器可以在一個類中找到一個特定的值，而不僅僅是一個單詞。
Fo 例如，假設我們要應用類屬性包含 allPadding 的所有
此規則將在所有具有包含 allPadding 的 at 類屬性的 HTML 元素周圍定義一個 50 像素的填充。因此，類名 new allPadding、surround allPadding red、allPaddingblue 和 allPadding-true 的元素將全部受此樣式約束。
CSS 屬性選擇器允許開發人員根據屬性值選擇元素，然後將特定樣式應用於這些元素。
本教程通過示例說明了屬性選擇器的基礎知識以及如何使用所有類型的CSS屬性選擇器。您現在可以像專業人士一樣開始使用 CSS 屬性選擇器了。
CSS 是 Web 開發中使用的三大主要技能之一。下載應用程序 免費 Python.Engineering 今天發言有一位經驗豐富的職業教練，他可以幫助您了解從事 Web 開發人員職業所需的技能。
Latest questions
