--- # System prepended metadata title: CSS selectors tags: [css, selectors] --- # CSS selectors ###### tags: `css` `selectors` ## ```id``` selector > 一份 document 裡 *id* 不能重複(區分大小寫)。 ### CSS ``` #myId { olor: #000; } ``` ### HTML ```
``` ## ```class``` selector ### CSS ```` .myClass { color: red; } ```` ### HTML ```
``` ## ```.class1.class2``` selector > 同時有 *class1* 跟 *class2* 兩個 classes (不分順序) ### CSS ``` .myClass1.myClass2 { color: orange; } ``` ### HTML ```
``` ## ```selector1 selector2``` selector > *selector2* 為 *selector1* 的 descendant (後裔：子或孫) ### 情境一 #### CSS ``` .myClass1 .myClass2 { color: palevioletred; } ``` #### HTML ```
``` ### 情境二 #### CSS ``` .myClass2 .myClass1 { color: palevioletred; } ``` #### HTML ```
``` ## ```*``` selector >所有 document 裡的 element ### CSS ``` * { font-size: 20px; line-height: 2.5; color: #333; } ``` ### HTML ```

title

``` ## ```element``` selector > HTML Tags 的 element ### CSS ``` DIV { color: cornflowerblue; } ``` ### HTML ```
``` ## ```element.class``` selector > 帶有這個 *class* 的 element ### CSS ``` DIV.myClass { color: cornflowerblue; } ``` ### HTML ```
<-- 有 -->
``` ## ```selector1, selector2``` selector > *selector1* 跟 *selector2* 一起改變 ### CSS ``` H1, P { color: cornflowerblue; } ``` ### HTML ```

<-- 有 -->

<-- 有 -->

<-- 有 -->

``` ## ```selector1 + selector2``` selector > 緊接在 *selector1* 之後的 *selector2* 跟 *selector1* 是同階層 ### CSS ``` DIV + P { color: crimson; } ``` ### HTML ```

<-- 無 -->

<-- 有 -->

<-- 無 -->

``` ## ```selector1 ~ selector2``` selector > 以 *selector1* 開頭後的 *selector2* 跟 *selector1* 是同階層 ### CSS ``` P ~ UL LI P { color: crimson; } ``` ### HTML ```

TEXT

``` ## ```[attribute]``` selector > 帶有這個 *attribute* 的 element ### CSS ``` [target] { color: crimson; } ``` ### HTML ```
<-- 無 --> <-- 有 --> <-- 有 -->
``` ## ```[attribute="value"]``` selector > *attribute* 只帶有這個 *value* 的 element ### CSS ``` [target="_blank"] { color: crimson; } ``` ### HTML ```
<-- 無 --> <-- 有 --> <-- 無 -->
``` ## ```[attribute~="value"]``` selector > *attribute* 的屬性值有包含這個 *value* 的 element (不分順序) ### CSS ``` [class~=color] { color: deeppink; } ``` ### HTML ```
<-- 有 -->
<-- 有 -->
<-- 無 -->
``` ## ```[attribute|="value"]``` selector > *attribute* 的屬性值開頭可以是有這個 *value* 或是等於這個 *value* 的 element (在 element 裡，若除了 value 外，後面還有其他字串時，要用 "-" 字元分開) ### CSS ``` [class|=long] { color: darkgoldenrod; } ``` ### HTML ```

<-- 有 -->

<-- 無 -->

<-- 有 -->

<-- 無 -->

``` ## ```[attribute^="value"]``` selector > *attribute* 的屬性值開頭有包含 *value* 的 element ### CSS ``` [href^="https://www."] { color: firebrick; } ``` ### HTML ```
<-- 有 --> <-- 無 --> <-- 無 -->
``` ## ```[attribute$="value"]``` selector > *attribute* 的屬性值結尾有這個 *value* ### CSS ``` [class$="Value"] { color: firebrick; } ``` ### HTML ```
<-- 有 -->
<-- 有 -->
<-- 無 -->
``` ## ```[attribute*="value"]``` selector > *attribute* 的屬性值中有這個 *value* 的 string 時 ### CSS ``` [class*="Value"] { color: firebrick; } ``` ### HTML ```
<-- 有 -->
<-- 有 -->
<-- 有 -->
<-- 無 -->
``` ## ```:active``` selector > 當 element 被點擊時 ### CSS ``` a:active { color: red; } ``` ### HTML ```
<-- 有 -->
``` ## ```::after``` selector > 在 element 之後插入一些內容 ### CSS ``` P::after { content: "(插入的內容)"; } ``` ### HTML ```

P之後插入一些內容

``` ## ```::before``` selector > 在 element 之前插入一些內容 ### CSS ``` P::before { content: "(插入的內容)"; } ``` ### HTML ```

在P之前插入一些內容

``` ## ```:checked``` selector > element 被選取時(僅適用於 `INPUT type="checkbox"` 或 `INPUT type="radio"` 和 `