亚洲天堂伊人,丰满熟女精品久久

選擇器

其主要作用在于選擇目標(biāo)標(biāo)簽；
CSS選擇器的類型：主要分為基礎(chǔ)選擇器與復(fù)合選擇器；
基礎(chǔ)選擇器是由單個選擇器組成的，可分為標(biāo)簽選擇器，類選擇器，ID選擇器與通配符選擇器；

基礎(chǔ)選擇器

標(biāo)簽選擇器

使用Html標(biāo)簽名稱作為選擇器；
可將某一類的標(biāo)簽全部選擇出來，不能作差異化的設(shè)置；

<style>
   p {
      color: red;
      font-size: 13px;
   }
        
   div {
       color: green;
       font-size: 14px;
   }
</style>

<body>
    <p>這是一個段落標(biāo)簽1</p>
    <p>這是一個段落標(biāo)簽2</p>
    <p>這是一個段落標(biāo)簽3</p>
    <div>說分手復(fù)合的時刻1</div>
    <div>說分手復(fù)合的時刻2</div>
    <div>說分手復(fù)合的時刻3</div>
</body>

類選擇器

可單獨選取一個標(biāo)簽，作差異化設(shè)置；
在Html標(biāo)簽中以class屬性表示，在CSS中以一個點號+class屬性表示；
樣式點定義，結(jié)構(gòu)類調(diào)用；
類選擇器-多類名：一個標(biāo)簽可以指定多個類名，多個類名之間用空格隔開；
可以將標(biāo)簽的相同樣式放到一個類里面，然后標(biāo)簽去調(diào)用公共的類，再然后調(diào)用自己獨有的類；

 <style>
    .red {
        color: red;
    }
    .green {
        color: green;
     }
</style>

<body>
    <ul>
        <li class="red">你們</li>
        <li class="green">翻收到</li>
        <li class="red">的撒發(fā)</li>
        <li class="green">后宮番</li>
    </ul>
</body>

<style>
    .box {
      width: 100px;
      height: 100px;
   }
        
   .red {
      background-color: red;
    }
        
    .green {
      background-color: green;
    }
</style>
<body>
     <!-- 多個類名 -->
    <div class="box red">王祖賢</div>
    <div class="box green">王祖賢</div>
    <div class="box red">王祖賢</div>
</body>

ID選擇器

以HTML標(biāo)簽的id屬性作為選擇器，在CSS中id選擇器以#來定義；
樣式通過#定義，結(jié)構(gòu)通過id定義，只能被調(diào)用一次；
id是唯一的，不能出現(xiàn)重復(fù)；

<style>
    #pink {
        color: pink;
    }
</style>

<body>
    <div id="pink">劉德華</div>
</body>

通配符選擇器

在CSS中，通配符選擇器使用*來定義，它表示選取頁面中的所有元素(標(biāo)簽)；
通配符選擇器不需要調(diào)用，自動給所有元素設(shè)置樣式；

<style>
    * {
       color: red;
     }
</style>

<body>
    <div id="pink">劉德華</div>
    <span>我的</span>
    <ul>
        <li>還是我的</li>
    </ul>
</body>

image.png

復(fù)合選擇器

復(fù)合選擇器是建立在基礎(chǔ)選擇器之上的，對基礎(chǔ)選擇器進(jìn)行組合形成的；
復(fù)合選擇器可更精準(zhǔn)，更高效的選擇目標(biāo)標(biāo)簽；
復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的；
復(fù)合選擇器包括：后代選擇器，子選擇器，并集選擇器，相鄰兄弟選擇器，通用兄弟選擇器，偽類選擇器等等；

后代選擇器

后代選擇器又稱包含選擇器，可以選擇父元素里面的子元素，其語法就是把外層標(biāo)簽寫在前面，內(nèi)部標(biāo)簽寫在后面，中間用空格分隔，當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就稱為外層標(biāo)簽的后代；
語法格式：元素1 元素2 { color: red; }
選取元素1中的所有元素2，設(shè)置樣式；
元素1與元素2以空格隔開，元素1是父級，元素2是后代，元素2可以是兒子，也可以是孫子，只要是元素1的后代即可；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
      /* 將ol中l(wèi)i選取出來 */
      ol li {
        color: red;
      }
        
      ol li a {
          color: indigo;
      }
        
      ul li {
          color: green;
      }
      /* 將class=nav的ul中l(wèi)i中a選取出來 */
        
      .nav li a {
          color: yellow;
      }
    </style>
</head>
<body>
    <ol>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>
            <a href="#">我是孫子</a>
        </li>
    </ol>
    <ul>
        <li>中國是多少</li>
        <li>中國是多少</li>
        <li>中國是多少</li>
        <li>中國是多少</li>
    </ul>
    <ul class="nav">
        <li>中國是多少</li>
        <li>中國是多少</li>
        <li>中國是多少</li>
        <li>
            <a href="#">的身份和顛三倒四</a>
        </li>
    </ul>
</body>

</html>

子選擇器

只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素；
其語法格式如下：元素1>元素2 { color: red; }；
元素1與元素2之間用大于號隔開；
元素1是父級元素2是子級，最終選擇的是元素2；
元素2必須是親兒子，不準(zhǔn)是孫子；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav>a {
            color: red;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">我是親兒子</a>
        <p>
            <a href="#">我是孫子</a>
        </p>
    </div>
</body>

</html>

并集選擇器

可以選擇多組標(biāo)簽，同時為它們定義相同的樣式；
其語法格式如下：元素1,元素2 { color: red; }；
元素1與元素2之間以逗號隔開；
同時設(shè)置元素1與元素2的樣式；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div,
        p,
        .pig li {
            color: red;
        }
    </style>

</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光頭強</span>
    <ul class="pig">
        <li>小豬佩奇</li>
        <li>小豬佩奇1</li>
        <li>小豬佩奇2</li>
    </ul>
</body>

</html>

相鄰兄弟選擇器

相鄰兄弟選擇器：利用加號(+)，將兩個選擇器相連；
語法格式：a+b { color: red; }，表示選擇緊跟在a選擇器的元素之后的第一個兄弟元素b，a與b是兄弟關(guān)系，有共同的父級元素，且b是a的第一個兄弟；

image.png

通用兄弟選擇器

通用兄弟選擇器：利用~，將兩個選擇器相連；
語法格式：a~b { color: red; }，表示a之后的所有兄弟選擇器b，都會被選中；

偽類選擇器

偽類選擇器：用于給某些選擇器添加特殊效果，常見的有鏈接(a)偽類選擇器，foucus偽類選擇器等等；
鏈接(a標(biāo)簽)偽類選擇器，主要有以下幾種狀態(tài)：
- a:link：選擇所有未被訪問的鏈接；
- a:visited：選擇所有已被訪問的鏈接；
- a:hover：選擇鼠標(biāo)指針位于其上的鏈接；
- a:active：選擇活動鏈接(鼠標(biāo)按下未彈起的鏈接)；
為了確保鏈接偽類能生效，請按照link->visited->hover->active的順序編寫；
鏈接a標(biāo)簽?zāi)J(rèn)是有樣式的，需要單獨設(shè)置樣式；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 未訪問的鏈接*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 已被訪問的鏈接*/
        
        a:visited {
            color: yellow;
        }
        /* 鼠標(biāo)指針位于其上的鏈接*/
        
        a:hover {
            color: skyblue;
        }
        /* 鼠標(biāo)按下未彈起的鏈接*/
        
        a:active {
            color: green;
        }
    </style>

</head>

<body>
    <a href="#">西游記</a>
</body>

</html>

foucus偽類選擇器：用于選取 獲取焦點的表單元素，焦點就是光標(biāo)，一般情況下<input>類表單元素才能獲取，因此這個選擇器也主要針對于表格元素來說；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input:focus {
            background-color: pink;
        }
    </style>

</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

image.png

CSS3新增的選擇器

在CSS3中新增了屬性選擇器，結(jié)構(gòu)偽類選擇器，偽元素選擇器，IE9.0+才支持，存在兼容性問題，移動端支持優(yōu)于PC端；

屬性選擇器

屬性選擇器：可以根據(jù)元素的特定屬性來選擇目標(biāo)元素；
屬性選擇器的權(quán)重為0010，屬性選擇器的主要類型有如下：
- a[attr]：有屬性attr的所有a標(biāo)簽；
- a[attr='value']：有屬性attr且屬性值為value的所有a標(biāo)簽；
- a[attr^='value']：有屬性attr且屬性值以value開頭的所有a標(biāo)簽；
- a[attr$='value']：有屬性attr且屬性值以value結(jié)尾的所有a標(biāo)簽；
- a[attr*='value']：有屬性attr且屬性值包含value的所有a標(biāo)簽；
- a[attr~='value']：有屬性attr且屬性值包含value，value整體要以空格隔開的所有a標(biāo)簽；
- a[attr|='value']：有屬性attr且屬性值以value或者value-開頭的所有a標(biāo)簽；

<body>
    <div class="test">1</div>
    <div class="test_btn">2</div>
    <div class="test">3</div>
    <div class="best-best_btn">4</div>
    <div class="test">5</div>
    <div class="test-btn best">6</div>
    <div class="best-btn test">7</div>
    <div class="best">8</div>
    <div class="best-btntest">9</div>
    <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
    <a  class="links active item " title="test website" target="_blank" lang="zh">2</a>
    <a href="#3" class="links item " title="this is a link" lang="zh-cn">3</a>
    <a href="#4" class="links item " target="_blank" lang="szh-tw">4</a>
    <a href="#5" class="links item " lang="zh-cn">5</a>
</body>

div[class] { background-color: red; }：有class屬性的所有div標(biāo)簽，則會選中所有的div標(biāo)簽；
div[class="test"] {background-color: red; }：有class屬性且屬性值為test的所有div標(biāo)簽，則會選中1，3，5 三個div標(biāo)簽；
div[class^="best"] { background-color: red; }：有class屬性且屬性值以best開頭的所有div標(biāo)簽，則會選中4，7，8，9 四個div標(biāo)簽；
div[class$="btn"] { background-color: red; }：有class屬性且屬性值以btn結(jié)尾的所有div標(biāo)簽，則會選中2，4 兩個div標(biāo)簽；
a[lang*="zh-"] { background-color: red; }：有l(wèi)ang屬性且屬性值包含zh-的所有a標(biāo)簽，則會選中3，4，5 三個a標(biāo)簽；
div[class~="test"] { background-color: red; }：有class屬性且屬性值為test且test要以空格隔開的所有div標(biāo)簽，則會選中1，3，5 ，7 四個div標(biāo)簽；
div[class|="test"] { background-color: red; }：有class屬性且屬性值以test或test-開頭的所有div標(biāo)簽，則會選中1，3，5，6 四個div標(biāo)簽；

偽類選擇器

偽類選擇器：主要根據(jù)文檔結(jié)構(gòu)來選擇元素，常用于在父元素中選擇子元素，
偽類選擇器的權(quán)重為0010，常見類型有如下：

先將所有子元素進(jìn)行排序，然后再選擇

.father a:first-child：在父元素father中選擇第一個子元素，若為a類型，則選中，否則未選中；
.father :first-child：在父元素father中選擇第一個子元素，無類型限制，直接選中；
.father a:last-child：在父元素father中選擇最后一個子元素，若為a類型，則選中，否則未選中；
.father :last-child：在父元素father中選擇最后一個子元素，無類型限制，直接選中；
.father a:nth-child(n)：其中n可以是數(shù)字，關(guān)鍵字，表達(dá)式；
- 當(dāng)n是數(shù)字時，表示在父元素father中選擇第n個子元素，若為a類型，則選中，否則未選中；
- 當(dāng)n是關(guān)鍵字時，即even(偶數(shù))，odd(奇數(shù))時，表示在父元素father中，選擇奇偶數(shù)項的子元素，若為a類型，則選中，否則未選中；
- 當(dāng)n是表達(dá)式時，注意n從0開始，例如當(dāng)n=n時，表示在父元素father中，選擇所有的a元素，當(dāng)n=n+5時，表示在父元素father中，從第五個子元素開始，若為a類型，則選中，否則未選中，當(dāng)n=-n+5時，表示在父元素father中，從前5個子元素中，若為a類型，則選中，否則未選中；

先將指定類型子元素進(jìn)行排序，然后再選擇

.father a:first-of-type：將父元素father中的所有a子元素排序，然后選中第一個a子元素；
.father :first-of-type：將父元素father中的所有類型子元素排序，由于沒有指定子元素類型，則會選擇所有類型的第一個子元素，則可能會選中多個子元素(不同類型)；
.father a:last-of-type：將父元素father中的所有a子元素排序，然后選中最后一個a子元素；
.father :last-of-type：將父元素father中的所有類型子元素排序，由于沒有指定子元素類型，則會選擇所有類型的最后一個子元素，則可能會選中多個子元素(不同類型)；
.father a:nth-of-type(n)：其中n可以是數(shù)字，關(guān)鍵字，表達(dá)式；
- 當(dāng)n是數(shù)字時，首先將父元素father中的所有a子元素排序，然后選擇第n項的a元素；
- 當(dāng)n是關(guān)鍵字時，即even(偶數(shù))，odd(奇數(shù))時，首先將父元素father中的所有a子元素排序，然后選擇奇偶數(shù)項的a元素；
- 當(dāng)n是表達(dá)式時，注意n從0開始，例如當(dāng)n=n+2時，首先將父元素father中的所有a子元素排序，然后選則從第2開始的所有a元素；

<body>
    <div class="box">
        <div>1</div>
        <span>2</span>
        <div>3</div>
        <span>4</span>
        <div>5</div>
        <span>6</span>
        <div>7</div>
        <span>8</span>
        <div>9</div>
        <span>10</span>
        <div>11</div>
        <span>12</span>
        <div>13</div>
        <span>14</span>
        <div>15</div>
        <span>16</span>
        <div>17</div>
        <span>18</span>
        <div>19</div>
        <span>20</span>
    </div>
</body>

.box span:first-child { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇第一個子元素，若為span類型，則選中，所以沒有元素被選中；
.box :first-child { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇第一個子元素，沒有指定類型，則直接選中，所以1被選中；
.box span:last-child { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇最后一個子元素，若為span類型，則選中，所以20被選中；
.box :last-child { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇最后一個子元素，沒有指定類型，則直接選中，所以20被選中；
.box div:nth-child(5) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇第5個子元素，若為div類型，則選中，所以5被選中；
.box :nth-child(5) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇第5個子元素，沒有指定類型，則直接選中，所以5被選中；
.box div:nth-child(odd) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇奇數(shù)項子元素，若為div類型，則選中，所以1,3,5,7,9,11,13,15,17,19被選中；
.box :nth-child(even) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后選擇偶數(shù)項子元素，沒有指定類型，則直接選中，所以2,3,4,6,8,10,12,14,16,18,20被選中；
.box div:nth-child(n+3) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后從第3個子元素開始往后選擇，若為div類型，則選中，所以3,5,7,9,11,13,15,17,19被選中；
.box :nth-child(n+3) { background-color: pink; }：將box中所有子元素進(jìn)行排序，然后從第3個子元素開始往后選擇，沒有指定類型，則直接選中，所以3~20都被選中；
.box span:first-of-type { background-color: pink; }：將box中所有span子元素進(jìn)行排序，然后選擇第一個span元素，則2被選中；
.box :first-of-type { background-color: pink; }：將box中所有類型子元素分別進(jìn)行排序，然后選擇所有類型的第一個元素，沒有指定類型，則直接選中span類型和div類型的第一個元素，則1,2被選中；
.box div:last-of-type { background-color: pink; }：將box中所有div子元素進(jìn)行排序，然后選擇最后一個div元素，則19被選中；
.box :last-of-type { background-color: pink; }：將box中所有類型子元素分別進(jìn)行排序，然后選擇所有類型的最后一個元素，沒有指定類型，則直接選中span類型和div類型的最后一個元素，則19,20被選中；
.box div:nth-of-type(5) { background-color: pink; }：將box中所有div子元素進(jìn)行排序，然后選擇第5個div元素，則9被選中；
.box :nth-of-type(5) { background-color: pink; }：將box中所有類型子元素分別進(jìn)行排序，然后選擇所有類型的第5個元素，沒有指定類型，則直接選中span類型和div類型的第5個元素，則9,10被中；
.box div:nth-of-type(odd) { background-color: pink; }：將box中所有div子元素進(jìn)行排序，然后選擇奇數(shù)項的div元素，則1,5,9,13,17被選中；
.box :nth-of-type(even) { background-color: pink; }：將box中所有類型子元素分別進(jìn)行排序，然后選擇所有類型的偶數(shù)項元素，則3,4,7,8,11,12,15,16,19,20被選中；
.box div:nth-of-type(n+5) { background-color: pink; }：將box中所有div子元素進(jìn)行排序，然后從第5項開始往后選擇div元素，則9,11,13,15,17,19被選中；
.box :nth-of-type(n+5) { background-color: pink; }：將box中所有類型子元素分別進(jìn)行排序，然后分別從第5項開始往后選擇div元素和span元素，則9～20都被選中；

偽元素選擇器

偽元素選擇器：可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)；

image.png

before與after創(chuàng)建一個元素，是屬于行內(nèi)元素，新創(chuàng)建的這個元素在文檔中是找不到的，所以我們稱之為偽元素；
語法格式：element::before {}；
before與after必須有content屬性；
偽元素選擇器與標(biāo)簽選擇器權(quán)重相同，權(quán)重為0001；
before在父元素內(nèi)容的前面創(chuàng)建元素，after在父元素內(nèi)容的后面創(chuàng)建元素；

<style>
    div {
       width: 200px;
       height: 200px;
       background-color: pink;
    }
        
    div::before {
       content: '我';
    }
        
    div::after {
       content: '祖宗';
    }
</style>

<body>
    <div>是</div>
</body>

image.png

偽元素選擇器的使用場景

第一種：偽元素字體圖標(biāo)；

<style>
    div {
        position: relative;
        width: 200px;
        height: 35px;
        border: 1px solid red;
    }
        
    div::after {
        position: absolute;
        //content: '圖標(biāo)';
        content: '\e309'
        right: 10px;
        top: 8px;
    }
</style>

<body>
    <div></div>
</body>

第二種：遮罩效果的實現(xiàn)；

<style>
    .box {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 50px auto;
    }
        
    .pic {
        width: 100%;
        height: 100%;
        background-color: green;
    }
    /* .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    } */
        
    .box::before {
        content: '';
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
        
    .box:hover::before {
        display: block;
     }
 </style>

<body>
    <div class="box">
        <img src="" alt="" class="pic">
        <!-- <div class="mask"></div> -->
    </div>
</body>

第三種：偽元素清除浮動；

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端入門03 -- CSS選擇器

前端入門03 -- CSS選擇器

選擇器

基礎(chǔ)選擇器

標(biāo)簽選擇器

類選擇器

ID選擇器

通配符選擇器

復(fù)合選擇器

后代選擇器

子選擇器

并集選擇器

相鄰兄弟選擇器

通用兄弟選擇器

偽類選擇器

CSS3新增的選擇器

屬性選擇器

偽類選擇器

先將所有子元素進(jìn)行排序，然后再選擇

先將指定類型子元素進(jìn)行排序，然后再選擇

偽元素選擇器

偽元素選擇器的使用場景

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端入門03 -- CSS選擇器

選擇器

基礎(chǔ)選擇器

標(biāo)簽選擇器

類選擇器

ID選擇器

通配符選擇器

復(fù)合選擇器

后代選擇器

子選擇器

并集選擇器

相鄰兄弟選擇器

通用兄弟選擇器

偽類選擇器

CSS3新增的選擇器

屬性選擇器

偽類選擇器

先將所有子元素進(jìn)行排序，然后再選擇

先將指定類型子元素進(jìn)行排序，然后再選擇

偽元素選擇器

偽元素選擇器的使用場景

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

先將所有子元素進(jìn)行排序，然后再選擇

先將指定類型子元素進(jìn)行排序，然后再選擇