HTML連載18-id選擇器與class區別&class選擇器使用思路&後代選擇器

時間 2019-12-04

原文原文鏈接

1、id選擇器和classable選擇器的區別git

選擇器github	CSS中的開頭微信	HTML標籤能夠綁定幾個post	是否可重複學習	用途大數據
id選擇器網站	#ui	僅能一個編碼	不能夠重複（一個標籤裏僅有一個）spa	通常狀況下是給JS用的，除非特殊狀況下才給設置樣式用
class選擇器	.	能夠多個	能夠重複（多對多的關係）	專門用來設置樣式的

2、選擇器的技巧能夠節省代碼行數

看好問題：作一個網頁

「我是好人」（顏色：紅色；格式：宋體）

「我是學生」（顏色：綠色；格式：宋體）

」我是壞人「（顏色：紅色；格式：楷體）

正常的編碼是：就是按照一段一段的寫

好處是清晰，每一段知道設置的什麼，互不干擾，可是冗餘代碼太多。

咱們須要轉換思路，以屬性爲中心，先設置好，在配到標籤上去，能夠節省代碼。

        .d1{           

            color:red;

            font-family: 宋體;

        }

        .d2{

            color:green;

            font-family: 宋體;

        }

        .d3{

            color:red;

            font-family: 楷體;

        }

        ......省略代碼......

        <p class="d1">我是好人</p>

        <p class="d2">我是學生</p>

        <p class="d3">我是壞人</p>

咱們改進代碼：顯示的一致，這也是對class性質（多標籤可對多個class選擇器）的應用，不然咱們全用id選擇器不也同樣，一旦大網站開發，涉及到文本圖片是龐大，先定義好格式，配到文本圖片

.color_red{

            color: red;

        }

        .color_green{

            color:green;

        }

        .ff_songti{

            font-family: 宋體;

        }

        .ff_kaiti{

            font-family: 楷體;

        }

        ......省略代碼......

        <p class="color_red ff_songti">我是好人</p>

        <p class="color_green ff_songti">我是學生</p>

        <p class="color_red ff_kaiti">我是壞人</p>

2、後代選擇器

1.定義：找到指定標籤的全部後代標籤而後設置屬性。用途即爲：企業開發會有上千上萬標籤，所以挨個寫class或者id就累死了，所以div應運而生。

2.格式：

標籤屬性1  標籤屬性2｛

            屬性：值；

 

｝

3.含義：先找到名稱叫作標籤名稱1的標籤，而後在這個標籤下面去查找全部名稱爲標籤名稱2的標籤，而後再設置屬性

4.注意：

（1）後代選擇器必須使用空格隔開

       div p{

            color:red;

        }

..........省略代碼........

<p>我是段落1</p>

<div>

    <p>我是紅的1</p>

    <p>我是紅的2</p>

</div>

（2）後代不單單是兒子，也包括孫子/重孫子等等

  div p{

            color:red;

        }

..........省略代碼......

<div>

    <ul>

        <li><p>重孫子標籤p，試一試</p></li>

    </ul>

</div>

（3）後代選擇器不單單可使用標籤名稱，還可使用其餘選擇器（這個性質更具擴展性，表明div下面一堆各類標籤都統一了格式，選擇器樣式會有這麼就是爲了減輕咱們的編碼負擔，可以適配各類場景，找到最優解）

一個id的例子：

   #test1 p{

            color:blue;

        }

 ..........省略代碼......      

<div id="test1" class="test2">

    <p>我是紅的1</p>

    <p>我是紅的2</p>

</div>

另外一個class的例子：

 .test2{

            color:green;

        }

 ..........省略代碼......      

<div id="test1" class="test2">

    <p>我是紅的1</p>

    <p>我是紅的2</p>

</div>

（4）div標籤裏面的標籤也可使用id，class屬性也都能搭配

格式：只演示id的，class的把#換成.就好了

#div的id名稱   #div裏面的標籤的id名稱｛

        屬性：名稱；

        ｝

（5）div標籤能夠向下無限延伸

格式：

div ul li p{

    屬性：值：

｝

例如：

   div ul li p{

            color:red;

        }

    </style>

</head>

<body>

<p>我是段落1</p>

<div id="test1" class="test2">

    <p>我是紅的1</p>

    <p>我是紅的2</p>

    <ul>

        <li><p>重孫子標籤p，試一試</p></li>

    </ul>

</div>