6.1 屬性選擇器的種類
CSS中的屬性選擇器允許根據屬性的存在、屬性值或屬性值的部分內容來選擇元素。它們提供了靈活和強大的HTML元素樣式設計功能，這使它們在處理動態內容和互動式網頁時特別有用。
屬性選擇器的種類
- 屬性選擇器 (Attribute Selector)
- 具有值的屬性選擇器 (Attribute Selector with Value)
- 具有前綴值的屬性選擇器 (Attribute Selector with Prefix)
- 具有後綴值的屬性選擇器 (Attribute Selector with Suffix)
- 包含值的屬性選擇器 (Attribute Selector with Substring)
- 具有空格分隔的屬性選擇器 (Attribute Selector with Whitespace)
- 具有連字符分隔的屬性選擇器 (Attribute Selector with Hyphen)
6.2 屬性選擇器
屬性選擇器選擇擁有指定屬性的元素，無論其值為何。
語法：
[屬性] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有擁有title屬性的元素 */
[title] {
color: blue;
}
HTML
<p title="這是標題">這段文字會是藍色的。</p>
<p>這段文字不會是藍色的。</p>
6.3 具有值的屬性選擇器
具有值的屬性選擇器選擇屬性值為指定值的元素。
語法：
[屬性="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有title屬性值為"範例"的元素 */
[title="範例"] {
color: green;
}
HTML
<p title="範例">這段文字會是綠色的。</p>
<p title="另一個範例">這段文字不會是綠色的。</p>
6.4 屬性開頭值的選擇器
屬性開頭值的選擇器選擇其屬性值以指定值開頭的元素。
語法：
[屬性^="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有title屬性值以"開始"開頭的元素 */
[title^="開始"] {
color: red;
}
HTML
<p title="開始文字">這段文字會是紅色的。</p>
<p title="不是開始">這段文字不會是紅色的。</p>
6.5 屬性結尾值的選擇器
屬性結尾值的選擇器選擇其屬性值以指定值結尾的元素。
語法：
[屬性$="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有title屬性值以"結尾"結尾的元素 */
[title$="結尾"] {
color: orange;
}
HTML
<p title="這是結尾">這段文字會是橙色的。</p>
<p title="這是開始">這段文字不會是橙色的。</p>
6.6 屬性包含子字串的選擇器
屬性包含子字串的選擇器選擇其屬性值中包含指定值的元素。
語法：
[屬性*="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有title屬性值中包含"中間"的元素 */
[title*="中間"] {
color: purple;
}
HTML
<p title="這是中文本">這段文字會是紫色的。</p>
<p title="這裡沒有中間">這段文字不會是紫色的。</p>
6.7 屬性空格分隔的選擇器
屬性空格分隔的選擇器選擇那些屬性值中包含一個或多個以空格分隔的值的元素。這對於選擇具有特定class或角色的元素很有用。
語法：
[屬性~="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
/* 選擇所有class屬性值中包含"highlight"的元素 */
[class~="highlight"] {
background-color: yellow;
}
HTML
<p class="highlight special">這段文字會有黃色背景。</p>
<p class="special highlight">這段文字也會有黃色背景。</p>
<p class="special">這段文字不會有黃色背景。</p>
6.8 屬性連字符分隔的選擇器
屬性連字符分隔的選擇器選擇那些屬性值中包含指定值或以指定值開頭，然後緊跟一個連字符的元素。
語法：
[屬性|="值"] {
屬性: 值;
屬性: 值;
}
範例：
CSS
p[lang|="ru"] {
font-style: italic;
}
HTML
<p lang="ru">這段文字會是斜體。</p>
<p lang="ru-RU">這段文字也會是斜體。</p>
<p lang="en">This text will not be italicized.</p>
GO TO FULL VERSION