Day21-css 選擇器-1: 基本選擇器

2023 iThome 鐵人賽

DAY 21

Modern Web

Angular，啟動。系列第 21 篇

15th鐵人賽

Raven

2023-10-06 23:01:31

270 瀏覽

分享至

CSS 選擇器

CSS 選擇器 - 術語表 | MDN

	名稱	範例
(A) 基本選擇器	(1) 元素選擇器	`elementname`
(2) Class 選擇器	`.classname`
(3) ID 選擇器	`#idname`
(4) 通用選擇器	`* ns	* *
(5) 屬性選擇器	`[attr=value]`
(B) 虛擬類別	(1) 狀態選擇器	`:hover` `:disabled`
(B) 虛擬元素		`::before` `::after`
(C) 複合選擇器	(1) 鄰接同層選擇器	`A + B`
(2) 通用同層選擇器	`A ~ B`
(3) 直屬選擇器	`A > B`
(4) 後代選擇器	`A B`

A1 元素選擇器 (Type selectors)

HtmlElementName
十分常見

span {
  background-color: skyblue;
}

A2 Class 選擇器 (Class selectors)

.[classname]

<p class="myText01">This paragraph has red text.</p>

.myText01 {
  background-color: skyblue;
}

A3 ID 選擇器 (ID selectors)

#[idname]

<p id="myText01">This paragraph has red text.</p>

#myText01 {
  background-color: skyblue;
}

A4 通用選擇器 (Universal selectors)

* [ns|* *|*]

<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>

* [lang^="en"] {
  font-weight: bold;
}
*.warning {
  font-style: italic;
}

A green span in a red paragraph.
＊結果顯示
　

A5 狀態選擇器 (Attribute selectors)

編號	句法	屬性(attr)的值(value)
1	`[attr]`	-
2	`[attr=value]`	相等
3	`[attr~=value]`	包含特定單字的 value
4	`[attr	=value]`
5	`[attr^=value]`	以 value 為前綴
6	`[attr$=value]`	以 value 為後綴
7	`[attr*=value]`	只要包含 value
8	`[attr operator value i]`	忽略大小寫
9	`[attr operator value s]`	區分大小寫

1、 `[attr]`

只要有該屬性即可。

a[herf] {
  color: green;
}

<a herf="" target="_blank"></a> <!--O-->
<a herf="XXX.com"></a>          <!--O-->
<a></a>                         <!--X-->

2、 `[attr=value]`

屬性與值須相等。

a[herf="XXX.com"] {
  color: green;
}

<a herf="XXX.com"></a> <!--O-->
<a herf="YYY.com"></a> <!--X-->

3、 `[attr~=value]`

可以選擇屬性值包含「特定單字」的元素。

a[herf~="fruit"] {
  color: green;
}

<a herf="fruit"></a>     <!--O-->
<a herf="AAA fruit"></a> <!--O-->
<a herf="fruit AAA"></a> <!--O-->
<a herf="a-fruit"></a>   <!--X-->
<a herf="fruit "></a>    <!--X-->
<a herf=" fruit"></a>    <!--X-->

4、 `[attr|=value]`

可以選擇具有值的元素、或值+-+其他字串。

a[herf|="south"] {
  color: green;
}

<a herf="south"></a>      <!--O-->
<a herf="south-east"></a> <!--O-->

5、 `[attr^=value]`

可以選擇以值為前綴的元素。

a[herf^="https"] {
  color: green;
}

<a herf="https://ithelp.ithome.com.tw/"></a> <!--O-->
<a herf="http://amy.com/"></a>               <!--X-->

6、 `[attr$=value]`

可以選擇以值為後綴的元素。

a[herf$=".pdf"] {
  color: green;
}

<a herf="abc.pdf"></a> <!--O-->

7、 `[attr*=value]`

只要包含一次的值。

a[herf*="apple"] {
  color: green;
}

<a herf="XappleXXXX"></a> <!--O-->
<a herf="apple-1"></a>    <!--O-->
<a herf="app-le"></a>     <!--X-->

8,9、 `[attr operator value i]` `[attr operator value s]`

線上Demo(developer.mozilla.org)
i: 忽略大小寫
s: 區分大小寫
※須注意使用者的瀏覽器有沒有支援

ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}
ol[type="b" s] {
  list-style-type: lower-alpha;
  background: lime;
}
ol[type="B" s] {
  list-style-type: upper-alpha;
  background: grey;
}
ol[type="c" i] {
  list-style-type: upper-alpha;
  background: green;
}

<ol type="A">
  <li>
    Red background for case-insensitive matching (default for the type selector)
  </li>
</ol>
<ol type="b">
  <li>Lime background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="B">
  <li>Grey background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="C">
  <li>
    Green background if `i` modifier is supported (case-insensitive match)
  </li>
</ol>

結果圖（使用 firefox 瀏覽器）
　