css選擇器 - 1

[attribute]

例子	例子描述
[target]	選擇帶有 target 屬性所有元素。

[attribute=value]

例子	例子描述
[target=_blank]	選擇 target="_blank" 的所有元素。

[attribute~=value]

例子	例子描述
[title~=flower]	選擇 title 屬性包含單詞 “flower” 的所有元素。

[attribute*=value]

例子	例子描述
a[src*="abc"]	選擇其 src 屬性中包含 “abc” 子串的每個 元素。

[attribute~=value] 和 [attribute*=value] 的相同點和區別：

<style> 
div[class~="test"] {
  background: #f00;
}
</style>
<div class="test">實驗1</div> <!-- 背景色爲紅色 -->
<div class="test test1">實驗2</div> <!-- 背景色爲紅色 -->
<div class="test-1">實驗3</div>
<div class="test_1">實驗4</div>

<style> 
div[class*="test"] {
  background: #f00;
}
</style>
<div class="test">實驗1</div> <!-- 背景色爲紅色 -->
<div class="test test1">實驗2</div> <!-- 背景色爲紅色 -->
<div class="test-1">實驗3</div> <!-- 背景色爲紅色 -->
<div class="test_1">實驗4</div> <!-- 背景色爲紅色 -->

[attribute|=value]

例子	例子描述
[lang|=en]	選擇 lang 屬性值以 “en” 開頭的所有元素。

[attribute^=value]

例子	例子描述
a[src^="https"]	選擇其 src 屬性值以 “https” 開頭的每個 元素。

[attribute|=value] 和 [attribute^=value] 的相同點和區別：

<style> 
div[class|="test"] {
  background: #f00;
}
</style>
<div class="test">實驗1</div> <!-- 背景色爲紅色 -->
<div class="test test1">實驗2</div>
<div class="test-1">實驗3</div> <!-- 背景色爲紅色 -->
<div class="test_1">實驗4</div>

<style> 
div[class^="test"] {
  background: #f00;
}
</style>
<div class="test">實驗1</div> <!-- 背景色爲紅色 -->
<div class="test test1">實驗2</div> <!-- 背景色爲紅色 -->
<div class="test-1">實驗3</div> <!-- 背景色爲紅色 -->
<div class="test_1">實驗4</div> <!-- 背景色爲紅色 -->

[attribute$=value]

例子	例子描述
a[src$=".pdf"]	選擇其 src 屬性以 “.pdf” 結尾的所有 元素。