CSS Selectors 介紹

Selectors英文直接翻譯是選擇者、選擇的物品等等，中文叫 選擇器 或 選取器
但選取器念起來超難發音的，很容易唸成"選取去"、"選起器"，每次都會打結...

可怕，我不是就學CSS階層樣式而已嗎
怎麼半路還冒出一個"選取器"，
不知道在幹嘛就算了，這玩意的名字還怪怪的...

選擇器就做一件事情：讓CSS樣式選擇哪個HTML Tag、或者哪個Element來作樣式的套用。
白話一點就是，如何去描述族譜或基因圖裡面的特定其中一人、或特定團體人物的作法。

基本選擇器

以下三種選擇方式是最最基本款~

1. 標籤選擇器 <tag>

HTML

...
<p>產生我有幽默以便隨。</p>
...

CSS

p{
    color: brown;
    font-size: 30px;
}

中文真是讓人搞昏頭
tag、label這兩者的中文都叫作"標籤"
tag 偏向附加的記號
label 屬於本身的標誌

2. 類別選擇器 class=""

HTML

...
<p class="para">產生我有幽默以便隨。</p>
...

CSS

.para{
    color: #555;
}

3. ID選擇器 #id

ID盡量不重複
ID能作錨點，網頁快速導覽時跳到指定的區域內容

HTML

...
<p id="para1">產生我有幽默以便隨。</p>
...

CSS

#para1{
    color: green;
}

以下則是使用程度低於上面三種的選取方法：

通用選擇器 *

* 星星符號(asterisk) 表示所有符合的標籤。

HTML

...
<p>段落文字1</p>
<p>段落文字2</p>
<p>段落文字3</p>
...

以下是兩個不一樣的CSS

CSS(網頁底下的所有元素均被選中)

*{
    color:blue;
    background-color:yellow;
}

CSS(只有Body底下的元素會被選中)

body *{
    color:blue;
    background-color:yellow;
}

狀態、擬態選擇器 :

hover 徘徊、當滑鼠滑過去時生效
active 被激發的，當滑鼠按住不放時生效

HTML

<a href="#">連結</a>

CSS

a:hover{
    font-size: 20px;
    color: red;
}

a:active{
    color: darksalmon;
}

偽元素 ::before、::after

兩個冒號::開頭都是偽元素，
偽元素因為很像元素但卻不是真正的元素，
所以必須加上content內容屬性，否則不會有任何效果(偽元素沒內容就自動隱藏啦)

::before 在該元素之前作用
::after 在該元素之後作用

HTML

...
<p>P段落</p>
<div>DIV</div>
<p>P段落</p>
...

div::before{
    content:"before";
    color:red;
}

div::after{
    content:"after";
    color:blue;
}

屬性選擇器 [attr=value]

...
<form action="index.html">
    <input type="text">
</form>
...

CSS

input[type="text"]{
    border: 3px solid blue;
    border-radius: 10px;
    background-color: yellow;
    padding: 5px;
    color: red;
}

以下幾種方式牽涉到下一層的子代、後代

子代是一種後代，
但後代不一定是子代
(後代包含子代、孫代、曾孫...)

複合選擇器

後代選擇器 A B

後代包含了子代、孫子、曾孫...

HTML

...
<div class="container">
    <div class="content">
        <a href="#">標籤1</a>
        <a href="#">標籤2</a>
        <p class="p1">這是段落1</p>
        <p class="p2">這是段落2</p>
    </div>
</div>
...

CSS

.container a{
    color: teal;
}

.container .p1{
    color: orange;
    font-weight: bold;
}

直屬、子代選擇器 A>B

只包含下一個子代

套用剛剛的HTML、CSS，
只是在CSS中加了個>符號，樣式就吃不到了。

HTML

<div class="container">
    <div class="content">
        <a href="#">標籤1</a>
        <a href="#">標籤2</a>
        <p class="p1">這是段落1</p>
        <p class="p2">這是段落2</p>
    </div>
</div>

CSS

.container>a{
    color: teal;
}

.container>.p1{
    color: orange;
    font-weight: bold;
}

多重選擇器 A,B

用逗號, 來一次選取多個選擇器條件

HTML

<div class="red">
    <div class="content1">content1</div>
    <div class="content2">content2</div>
</div>

<div class="content1">content1</div>
<div class="content2">content2</div>

CSS

.red .content1,.red .content2{
    font-size: xx-large;
}

.red{
    color: red;
}

同時具有多個Class AB

中間沒有任何符號分隔，需同時具備多個選擇器條件
(只要有class就會套用，與class的順序無關)

HTML

<div class="blue red" id="test">
    test
</div>

CSS

.red.blue#test{
    background: red;
    color: dodgerblue;
    font-size: xx-large;
}