CSS學習記錄1.2/标簽選擇器/id選擇器/類選擇器/後代選擇器/子元素選擇器

标簽選擇器：

根據指定的标簽名稱，在目前界面中找到該名稱的标簽，然後設定屬性。

格式：

标簽名稱{
             屬性：值；
    }
           

注意點：

1、标簽選擇器選擇的是目前頁面所有的标簽，不能單獨選中某一個标簽。

2、标簽選擇器無論标簽藏的多深都能選中。

3、隻要是HTML中的标簽就可以作為标簽選擇器。

id選擇器：

根據指定的id名稱找到對應的标簽，然後設定屬性。

格式：

#id名稱{
            屬性：值；
}
           

1、每個HTML标簽，都有一個屬性叫做id，每一個标簽都可以設定id。

2、在同一個界面中id的名稱是不可以重複的。

3、在編寫id選擇器時一定要在id前加上#。

4、id的名稱隻能由字母、數字、下劃線組成，不能以數字開頭，id名稱不能是HTML标簽的名稱。

5、在企業開發中如果僅僅是為了設定樣式，不使用id，因為在前端開發在id是留給js使用的。

類選擇器:

根據指定的類名稱找到對應的的标簽，然後設定屬性。

格式：

.類名稱{
            屬性: 值;
        }
           

注意點：

1、每個HTML标簽，都有一個屬性叫做class，每一個标簽都可以設定class。

2、在同一個界面中class的名稱是可以重複的。

3、在編寫類選擇器時一定要在class前加上“.”。

4、class的名稱隻能由字母、數字、下劃線組成，不能以數字開頭，class名稱不能是HTML标簽的名稱。

5、類名就是專門用來給某個特定的标簽設定樣式的。

6、在HTML中的每個标簽可以同時綁定多個類名。

格式：

<标簽名稱 class="類名1 類名 ```">文本</p>
           

id與class的差別：

1、id相當于人的身份證不可以重複，class相當于人的名稱可以重複。

2、一個HTML标簽隻能綁定一個id名稱，一個HTML标簽可以綁定多個class名稱。

id選擇器和class選擇器是差別：

id選擇器是以#開頭，class選擇器是以.開頭。

後代選擇器：

找到指定标簽的所有後代标簽，設定屬性。

格式：

标簽名稱1 标簽名稱2{
            屬性: 值;
        }
           

注意點;

1、後代選擇器必須用空格隔開。

2、放在指定标簽中的都是後代。

3、後代選擇器不僅僅可以使用标簽名稱，還可以使用其他選擇器。

例：

<p>段落1</p>
<div id="aaa" class="bbb">
    <p>段落2</p>
    <p>段落3</p>
</div>
<p>段落4</p>
           

div p{
            color: red;
        }
        #aaa p{
            text-decoration: underline;
        }
        #aaa .bbbb{
            color: aqua;
        }
        .bbb p{
            font-size: 20px;
        }
        .bbb .bbbb{
            color: royalblue;
        }
           

4、後代選擇器可以無限往後延伸。

例：

<div id="aaa" class="bbb">
    <ul>
        <li>
            <p>段落2</p>
            <p>段落3</p>
        </li>
    </ul>
           

div ul li p{
            color: darkturquoise;
        }
           

子元素選擇器：

找到指定标簽中所有特定的直接子元素，然後設定屬性。

格式;

标簽名稱1>标簽名稱2{
            屬性: 值;
        }
           

注意點：

1、子元素選擇器隻會查找兒子，不會查找其他被嵌套的标簽。

2.子元素選擇器之間需要用>符号連接配接，并且不能空格。

3、子元素選擇器不僅僅可以使用标簽名稱，還可以使用其他選擇器。

例：

.bbbb>p{
            color: #000;
        }
           

4、子元素選擇器可以無限往後延伸。

後代選擇器與子元素選擇器之間的差別：

1、後代選擇器使用空格作為連接配接符号，子元素使用>作為連接配接符号。

2、後代選擇器選擇指定标簽中的所有後代，子元素選擇器隻會選中指定标簽中的特定的直接标簽。

後代選擇器與子元素選擇器之間的共同點：

1、後代選擇器和子元素選擇器都可以使用标簽名稱、id名稱、class名稱作為選擇器。

2、後代選擇器和子元素選擇器都可以通過各自的連接配接符号一直延續下去。

選擇器1 選擇器2 選擇器3·····{}

選擇器1>選擇器2>選擇器3·····{}