前端高級選擇器僞類選擇器

時間 2019-11-20

標籤前端高級選擇器简体版

原文原文鏈接

高級選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高級選擇器</title>
    <style>
        .h2 {
            color: red;
        }

        /*一、後代(子代)選擇器*/
        /*後代：空格鏈接  子代：>鏈接*/
        /*body > .h2 控制一個 | body .h2 控制兩個*/
        body > .h2 {
            font-size: 40px;
        }

        /*二、兄弟(相鄰)標籤：只能上兄弟修飾下兄弟*/
        /*兄弟：~鏈接  相鄰：+鏈接*/
        /*.h3 + .h4 控制一個 | .h3 ~ .h4 控制兩個*/
        .h3 + .h4 {
            color: pink;
        }

        /*三、羣組選擇器：控制多個選擇器*/
        .h2, body h3, h4 {
            text-align: center;
        }

        /*四、選擇器的優先級：權重 - 個數*/
        /*權值：不一樣級別沒有可比性、同一級別比個數、選擇器類型不影響優先級、優先級一致看順序
        *：1
        標籤：10
        class(僞類)：100
        id：1000
        !important：10000
        */
        #h6 {
            color: black;
        }

        .d1 div h6 {
            color: pink;
        }
        .d2 h6 {
            color: brown;
        }

        body h6 {
            color: cyan;
        }
        div > h6 {
            color: orange;
        }
        h6 {
            font-size: 100px;
            text-align: center;
            color: red;
        }

    </style>

    <style>

        /*五、交叉選擇器*/
        h6#h6.h.hh {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <h6 id="h6" class="h hh">css高級選擇器優先級</h6>
        </div>
    </div>

    <h3 class="h3">第1個h3</h3>
    <h4 class="h4">第1個h4</h4>
    <h4 class="h4">第2個h4</h4>
    <h3 class="h3">第1個h3</h3>
    <div>
        <h4 class="h4">第1個h4</h4>
        <h4 class="h4">第2個h4</h4>
    </div>
    
    
    <h2 class="h2">h2標籤</h2>
    <div>
        <h2 class="h2">div下的h2</h2>
    </div>
    <p>p標籤的內容不水平居中</p>

</body>
</html>

僞類與屬性選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>僞類選擇器</title>
    <style>
        .p {
            background-color: orange;
        }

        /*先肯定位置，再篩選選擇器*/
        p:nth-child(3) {
            background-color: red;
        }

        /*先肯定選擇器，在匹配位置*/
        p:nth-of-type(3) {
            background-color: brown;
        }

        p.p3 {
            background-color: cyan;
        }
        /*總結：
        一、僞類選擇器優先級與類相同
        二、nth-child在同一結構下都是相同選擇器時使用
        三、nth-of-type在同一結構下不全是相同選擇器時使用
        */
    </style>

    <style>
        .h4 {
            color: orange;
        }
        [class='h4'] {
            color: brown;
        }
        [owen*='owen'] {
            color: pink;
        }
        [owen^='o'] {
            color: blueviolet;
        }
        /*總結：
        一、屬性選擇器優先級同類
        二、[屬性名]查找全部有該屬性的標籤
        三、[屬性名=屬性值]精確查找
        四、[屬性名^=值]以某某值開頭
        四、[屬性名*=值]包含某某值(模糊查詢)
        */
    </style>
</head>
<body>
    <h4 class="h4" owen="oooowennnnn">owen</h4>
    <h4 class="h4" owen="zero">zero</h4>

    <div>
        <p class="p">第1個p</p>
        <p class="p">第2個p</p>
        <p class="p p3">第3個p</p>
        <p class="p">第4個p</p>
        <p class="p">第5個p</p>
    </div>
    <div>
        <div>
            <h3>h3標籤</h3>
            <p class="p">第1個p</p>
            <p class="p">第2個p</p>
            <p class="p">第3個p</p>
            <p class="p">第4個p</p>
            <p class="p">第5個p</p>
        </div>
    </div>
</body>
</html>

a標籤的四大僞類

!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a標籤的四大僞類</title>
    <style>
        /*1、a的四大僞類*/
        a {
            font-size: 30px;
        }
        /*一、標籤沒有被訪問過*/
        a:link {
            color: orange;
        }
        /*二、標籤被懸浮*/
        a:hover {
            /*鼠標樣式*/
            /*wait row-resize none text pointer default*/
            cursor: pointer;
        }
        /*三、標籤被激活*/
        a:active {
            color: pink;
            cursor: wait;
        }

        /*四、標籤已被訪問過*/
        a:visited {
            color: brown;
        }
    </style>

    <style>
        /*2、reset操做*/

        /*在開發中每每用不到四種僞類，且要清除掉系統的默認樣式*/
        /*就能夠以下對a標籤進行樣式設置：清除系統默認樣式 - reset操做*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
    <style>
        /*3、普通標籤的僞類運用*/
        .btn {
            width: 80px;
            height: 45px;
            background-color: orange;
        }
        /*字體*/
        .btn {
            font: bold 20px/45px 'STSong';
            text-align: center;
        }
        /*邊界圓角*/
        .btn {
            border-radius: 5px;
        }
        /*不容許文本操做*/
        body {
            user-select: none;
        }

        /*僞類*/
        .btn:hover {
            cursor: pointer;
            background-color: orangered;
        }
        .btn:active {
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="btn">按鈕</div>

    <!--
    標籤沒有被訪問過
    標籤被懸浮
    標籤被激活
    標籤已被訪問過
    -->
    <a href="https://www.baidu.com">前往百度</a>

</body>
</html>