亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

選擇器中，可以寫多組樣式屬性，使用{}進(jìn)行包裹；          

多組樣式之間，使用分號(hào)分隔； 

樣式屬性與屬性值之間，用冒號(hào)隔開                     

    選擇器{              

        屬性1:屬性值1;

        屬性2:屬性值2;         

}

【CSS中常用選擇器】

        ① 標(biāo)簽選擇器

          寫法： HTML標(biāo)簽名{}

          作用：選中頁面中所有與選擇器同名的HTML標(biāo)簽。

        li{

            /*color: red;*/

        }

        ②類選擇器（class選擇器）

         * 寫法：  .class名{}

         * 調(diào)用： 在需要應(yīng)用這套樣式的標(biāo)簽上，使用class="class名"調(diào)用選擇器。

         * 優(yōu)先級(jí)：  class選擇器>標(biāo)簽選擇器

        .ji{

            /*color: blue;*/

        }

        ③ID選擇器：

         * 寫法：  #ID名{}

         * 調(diào)用：  在需要應(yīng)用這套樣式的標(biāo)簽上，使用id="ID名"調(diào)用選擇器。

         * 優(yōu)先級(jí)： ID選擇器>class選擇器

        #two{

            /*color: yellow;*/

        }

        /* 【class選擇器和ID選擇的區(qū)別】

         * 1. 寫法不同：class選擇器用.聲明，ID選擇器用#聲明；

         * 2. 優(yōu)先級(jí)不同：ID選擇器>class選擇器

         * 3. 調(diào)用次數(shù)不同： class選擇器可以調(diào)用多次； ID選擇器只能調(diào)用一次(同一頁面，不能出現(xiàn)同名ID)。

         */

        ④通用選擇器

         * 寫法：  *{}

         * 作用： 作用于頁面中所有的HTML標(biāo)簽；

         * 優(yōu)先級(jí)：  最低！低于標(biāo)簽選擇器。

        *{

            /*background-color: yellow;*/

            /*color: pink;*/

        }

        ⑤并集選擇器

         * 寫法： 選擇器1,選擇器2,……選擇器n{}  多個(gè)選擇器之間逗號(hào)分隔。

         * 生效規(guī)則： 多個(gè)選擇器取并集，只要標(biāo)簽滿足其中任何一個(gè)選擇器，樣式即可生效

         * (其實(shí)相當(dāng)于多個(gè)選擇器拆開寫)

        li,.ji{

            /*color: red;*/

        }

        ⑥ 交集選擇器

         * 寫法： 選擇器1選擇器2……選擇器n{}  多個(gè)選擇器之間緊挨著，沒有分隔

         * 生效規(guī)則： 多個(gè)選擇器取交集，必須滿足所有選擇器的要求，樣式才能生效。

        li.ji{

            /*color: red;*/

        }

        ⑦ 后代選擇器

         * 寫法： 選擇器1 選擇器2 …… 選擇器n{}

         * 生效規(guī)則： 只要滿足后一個(gè)選擇器是前一個(gè)選擇器的后代，樣式即可生效（后代包括子代、孫代。。。）

        div .ji{

            /*color: red;*/

        }

        ⑧ 子代選擇器

         * 寫法： 選擇器1>選擇器2>……>選擇器n{}

         * 生效規(guī)則： 必須滿足后一個(gè)選擇器是前一個(gè)選擇器的直接子代，樣式才能生效。（兩個(gè)選擇之間不能有任何其他標(biāo)簽）

        div>ul>.ji{

            color: red;

        }

/* 偽類: 類型選擇器 */

選擇第一個(gè)li類型的元素

ul li:first-of-type {

    background-color: darkorchid;  /* 第一個(gè)li類型的元素 */

}

最后一個(gè)li類型的元素 

ul li:last-of-type {

    background-color: darkorchid;  /* 最后一個(gè)li類型的元素 */

}

選擇第6個(gè)li類型的元素

ul li:nth-of-type(6) {

    background-color: darkorchid;  /* 選擇第6個(gè)li類型的元素 */

}

/* 選中每個(gè)div中的第二個(gè)子元素 */

div :nth-child(2) {

    background-color: lightgreen;

}

/* 選擇頁面中的第二個(gè)p元素 */

p:nth-of-type(2) {

    background-color: yellow;

}

/* 偽類: 表單控件 */

form :enabled {

    background-color: wheat;

}

/* 當(dāng)在控件中輸入無效值文本自動(dòng)變成紅色 */

form :invalid {

    color: red;

}

/* 設(shè)置控件獲取到焦點(diǎn)時(shí)的樣式 */

form :focus {

    background-color: lightgreen;

}

/* 設(shè)置鼠標(biāo)懸停時(shí)的樣式 */

button:hover {

    width: 56px;

    height: 28px;

    background-color: black;

    color: white;

}