這不同於* = 選擇器
,不僅可以找到屬性中的特定單詞,還可以找到屬性中的特定值。
CSS [attribute | = "value"]
[屬性| = "value"]
選擇器允許您選擇屬性以某個值開頭的元素(例如,“Top”)。這包括屬性以指定值開頭並包含連字符後跟附加文本(例如,“top-style”和其他“top-”值)的元素。請注意,代碼需要在單詞“”之後使用豎線 (|) Class.,"
例如,假設您要為每個
分配一個 10 像素的頂部填充,其中類屬性以 top
,包括後跟其他值的那些,用連字符分隔。您可以使用以下代碼:
此規則將在每個
需要注意的是,指定的值必須是一個完整的單詞或一個單詞後跟一個連字符。換句話說,我們上面的樣式將應用於具有類名 top style
和 top-style
的 元素name topstyle
.
CSS [attribute ^ = "value,"]
[attribute ^ = & ldquo 選擇器; value ‚"]
用於選擇屬性值以特定值開頭的元素。指定值不必是整個單詞,不像 [attribute | = "value"]
我們之前討論過。
假設我們要為每個具有以 paddingBottom
開頭的類屬性的
用戶的瀏覽器會將我們定義的padding-bottom樣式應用到所有類名以“paddingBotto”開頭的
CSS [attribute $="value,"]
L`操作符$ =
用於選擇所有屬性值以某個值結尾的元素。例如,假設您想將所有超文本的文本顏色更改為灰色,這些超文本的 href 屬性值以 .app
結尾。您可以使用以下代碼執行此操作:
此選擇器將應用於您網頁的所有 元素,其 href 值為 ,Äã,Äã 以 .app
結尾。
CSS [attribute * = "value"]
操作符 * =
允許您選擇所有元素,其值 ,Äã,Äãd `屬性包含特定價值。與 ~=
運算符不同的是,這個屬性選擇器可以在一個類中找到一個特定的值,而不僅僅是一個單詞。
Fo 例如,假設我們要應用類屬性包含 allPadding
的所有
此規則將在所有具有包含 allPadding
的 at 類屬性的 HTML 元素周圍定義一個 50 像素的填充。因此,類名 new allPadding
、surround allPadding red
、allPaddingblue
和 allPadding-true
的元素將全部受此樣式約束。
結論
CSS 屬性選擇器允許開發人員根據屬性值選擇元素,然後將特定樣式應用於這些元素。
p> 本教程通過示例說明了屬性選擇器的基礎知識以及如何使用所有類型的CSS屬性選擇器。您現在可以像專業人士一樣開始使用 CSS 屬性選擇器了。
CSS 是 Web 開發中使用的三大主要技能之一。下載應用程序 免費 Python.Engineering 今天發言有一位經驗豐富的職業教練,他可以幫助您了解從事 Web 開發人員職業所需的技能。