【後转前要多久】# Day06 CSS - Selectors 选取器

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;
}