css3常用選擇器

常用屬性選擇器

E[attr=‘val’]: 屬性attr值爲val的元素
E[attr~=‘val’]: 屬性attr有多個值, 但其中一定有一個值是val
E[attr^=‘val’]: 屬性值以val開頭的元素
E[attr*=‘val’]: 屬性值中包含val字符
E[attr$=‘val’]: 屬性值以val結尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用屬性選擇器</title>
    <style>
        /* 找到type屬性爲text的input元素 */
        input[type='text'] {
            border: 1px solid tomato;
        }

        /* 找到class中帶有handler屬性的div元素 */
        div[class ~= 'handler'] {
            color: green;
        }

        /* 找到class屬性以password開頭的input元素 */
        input[class ^= 'password'] {
            border: 1px solid blue;
        }

        /* 找到class屬性以p開頭的input元素 */
        input[class ^= 'p'] {
            border: 1px solid gold;
        }

        /* 找到class屬性以t結尾的div元素 */
        div[class $= 't'] {
            background-color: indianred;
        }

        /* 找到name中包含login的input元素 */
        input[name *= 'login'] {
            border: 1px solid saddlebrown;
        }
    </style>
</head>
<body>
    <form action="#">
        <input type="text"> 
        <input class="password input" type="password">
        <input type="number" name = 'loginId'>
    </form>

    <div class="box wrapper handler">hello</div>
    <div class="last">world</div>
</body>
</html>

常用同級選擇器

E + F: 匹配所有緊隨E元素之後的同級元素F, 這哥們F一定是要緊跟在E後面的, 中間空了一個元素都不成的

E ~ F: 匹配任何元素在E元素之後的同級F元素（兄弟選擇器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用選擇器</title>
    <style>
        /* 匹配類名隊列中有一個類名爲wrapper的屬性, 然後找到他的直系子元素中的類名爲.content-box
        的元素, 經過該元素找到他之後的所有爲div的兄弟元素 並且設置背景色爲salmon
         */
        div[class~='wrapper'] > .content-box ~ div {
            background-color: salmon;
        }

        /* 匹配類名字符串中有wra這三個字符的元素, 然後找到他的直系子元素中的類名爲.content-box
        的元素, 經過該元素找到他之後的第一個div屬性設置字體色爲#fff
         */
        div[class*='wra'] > .content-box + div {
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content-box">1</div>
        <div class="left-box">2</div>
        <div class="right-box">3</div>
    </div>
</body>
</html>

常用僞類選擇器

E:not[attr]: 匹配元素中不是attr的元素, （attr可以是類名id名等）
E:first-child: 匹配父元素的第一個子元素, 且匹配到的該元素必須是E, E(element => 可以是li, div, p)

<!-- 比如 -->
<ul>
    <p>hello</p>
    <li>world</li>
</ul>
<!-- 像上面這種情況如果寫li:first-child會匹配不到因爲li的父元素的第一個子元素不是li -->

E:last-child: 匹配父元素的最後一個子元素且匹配到的該元素必須是E, E(element => 可以是li, div, p)
E:nth-child(n): 匹配父元素的第n個子元素（正序）且匹配到的該元素必須是E, E(element => 可以是li, div, p)
E:nth-last-child(n): 匹配父元素的第n個子元素（倒序）且匹配到的該元素必須是E, E(element => 可以是li, div, p)
E:first-of-type: 匹配父元素的第一個E元素, 他會直接略過非E元素的子元素

<!-- 比如 -->
<ul>
    <p>hello</p>
    <li>world</li>
</ul>
<!-- 像上面這種情況如果寫li:first-of-type, 當看到父元素的第一個子元素是p他會直接跳過知道找到第一個爲li的子元素所以會匹配到<li>world</li> -->

E:last-of-type: 匹配父元素的最後一個E元素
E:nth-of-type: 匹配父元素的第n個E元素（正序）
E:nth-last-of-type: 匹配父元素的第n個E元素（倒序）

上面八個僞類選擇器的實例如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用選擇器</title>
    <style>
        /* 匹配li中類名不是active的所有li */
        li:not(.active) {
            color: blue;
        }

        /* 匹配li父元素的第一個子元素 -> 且這個第一個子元素必須是li */
        li:first-child {
            background-color: red;
        }

        /* 匹配li父元素的最後一個子元素 -> 且這個最後一個子元素必須是li */
        li:last-child {
            background-color: gold;
        }
        /* 匹配li父元素的第n個子元素 -> 且這個第n個子元素必須是li n從1開始*/
        li:nth-child(2) {
            background-color: green;
        }
        /* 匹配li父元素的第n個子元素(但是這個順序是從後往前找倒數的) -> 且這個第n個子元素必須是li n從1開始*/
        li:nth-last-child(2) {
            background-color: hotpink;
        }
        /* 匹配li父元素的奇數個子元素 -> 且這個第n個子元素必須是li n從1開始*/
        li:nth-child(2n + 1) {
            color: lightseagreen;
        }

        /* 匹配到父元素的第一個元素類型爲div的子元素 */
        div:first-of-type {
            background-color: brown;
        }

        /* 匹配到父元素的最後一個類型爲.span類名的元素 */
        .span:last-of-type {
            color: #fff;
        }

        /* 匹配到.wrapper下div父元素的第一個div元素 */
        .wrapper > div:nth-of-type(1) {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <ul>     
        <li>2</li>
        <li>3</li>
        <li class="active">1</li>
        <li>4</li>
    </ul>

    <div class="wrapper">
        <p>hello</p>
        <div>world</div>
        <span class="span">yes</span>
        <div>no</div>
    </div>
</body>
</html>

E:empty: 匹配元素內容是空的E元素, 元素內容不能有任何節點包括空格, 同時如果設置了僞元素但是本身元素內容爲空, 也會視作匹配成功


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用選擇器</title>
    <style>
        /* 匹配元素內容爲空的div元素, 所以inner會被選中 */
        div:empty {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <div class='inner'></div>
    </div>
</body>
</html>

E:enable: 匹配表單中激活的元素
E:disabaled: 匹配表單中未激活的元素
E:checked: 匹配表單中選中的元素, 單選框或者複選框
E:target: 匹配當前被選中的錨點
:root: 根元素, 相當於html

上方五個選擇器實例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用選擇器</title>
    <style>
        :root {
            width: 100%;
            height: 100%;
            background-color: firebrick;
        }

        /* 匹配禁用的input框 */
        input:disabled {
            background: cornflowerblue;
        }
        /* 匹配可輸入的input框 */
        input:enabled {
            border: 1px solid tomato;
        }
        /* 匹配被選中的複選框 */
        input:checked {
           width: 500px;
        }
        /* 匹配於錨點響應的a鏈接 */
        a:target {
            display: block;
            width: 10px;
            height: 10px;
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
    你好我是一名前端工程師
   <form action="">
        <input type="text" placeholder="請輸入用戶名" disabled>
        <input type="password">
        <label for="name">name</label><input type="checkbox" name="" checked id="name">
        <a id="1" href="#1">1</a>
   </form>
</body>
</html>

常用僞元素選擇器

E::first-letter: 找到E元素的第一個字元素文本內容
E::first-line:找到E元素的第一行元素文本內容
::selection: 匹配用戶選中文字

上方三個選擇器實例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3常用選擇器</title>
    <style>
        /* 當文字被鼠標選中 */
        ::selection {
            color: gold;
        }
        /* 文本的第一個字 */
        ::first-letter {
            color: hotpink;
        }
        /* 文本的第一行 */
        ::first-line {
            color: indigo;
        }
    </style>
</head>
<body>
    你好我是一名前端工程師
</body>
</html>

我們來根據上方的一些選擇器做一個純css的選項卡, 話不多說效果如圖

先新建一個html頁面

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>純css實現選項卡</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <!-- 選項卡wrapper -->
    <div class="tab-wrapper">
        <!-- 第一個tab -->
        <div class="first-tab tab">
            <input type="radio" checked name="listTab" id="first">
            <div class="show-content">
                <label for="first">
                    <a id="1" href="#1"></a>
                </label>
                <img src="https://c.static-nike.com/a/images/f_auto/dpr_1.0/w_1605,c_limit/e21582bd-8559-49df-8b33-983ef5d262a8/jordan.jpg" alt="">
            </div>
        </div>
        <!-- 第二個tab -->
        <div class="seccond-tab tab">
            <input type="radio" name="listTab" id="second">
            <div class="show-content">
                <label for="second">
                    <a id="2" href="#2"></a>
                </label>
                <img src="https://c.static-nike.com/a/images/f_auto/dpr_1.0/w_1605,c_limit/ca3676ef-d998-4363-a40e-0b6c8ae1b712/nike-.jpg" alt="">
            </div>
        </div>
        <!-- 第三個tab -->
        <div class="third-tab tab">
            <input type="radio" name="listTab" id="third">
            <div class="show-content">
                <label for="third">
                    <a id="3" href="#3"></a>
                </label>
                <img src="https://c.static-nike.com/a/images/f_auto/dpr_1.0/w_1717,c_limit/edd73182-1d29-478c-bd6e-2d38b00fb1e0/nike-.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>

同時註冊一個demo.css

/* 初始化wrapper */
.tab-wrapper {
    position: relative;
    width: 800px;
    height: 400px;
    margin: 100px auto;
}
/* 總共三個tab欄 */
.tab-wrapper .tab {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* 給單選框全部都要消失 */
.tab-wrapper .tab input[type='radio'] {
    display: none;
}

/* 設置圖片和圖片容器的寬高 */
.tab-wrapper > .tab > .show-content, .tab-wrapper > .tab > .show-content > img {
    width: 100%;
    height: 100%;
}

/* label直接作爲白色小方塊的索引 */
.tab-wrapper .tab label {
    display: inline-block;
    width: 50px;
    height: 6px;
    font-size: 0;
    background-color: #fff;
    position: absolute;
    left: calc(50% - 10px);
    bottom: 10px;
    z-index: 999;
    cursor: pointer;
}

/* 圖片默認都不展示 */
.tab-wrapper .tab .show-content img {
    opacity: 0;
    transition: opacity 0.5s linear; 
}

/* 當點擊label導致單選框被選中的時候圖片的透明度變爲1 */
.tab-wrapper .tab input[type = 'radio']:checked + .show-content > img {
    opacity: 1;
  
}

/* 同時也要更改選中的索引的顏色 */
.tab-wrapper .tab input[type = 'radio']:checked + .show-content label {
    background-color: rgba(0, 0, 0, 0.4);
}

.tab-wrapper .tab:first-of-type label {
    left: calc(42% - 10px);
}


.tab-wrapper .tab:nth-of-type(2) label {
    left: calc(50% - 10px);
}

.tab-wrapper .tab:last-of-type label {
    left: calc(58% - 10px);

}

無任何css我們的漸變選項卡就做好啦

至此css3的常用選擇器筆者已經介紹完畢, 歡迎得到交流

付金權

發佈了28 篇原創文章 · 獲贊 11 · 訪問量 2048

私信關注

Css3常用選擇器以及選擇器demo實操漸變選項卡

css3常用選擇器

常用屬性選擇器

常用同級選擇器

常用僞類選擇器

常用僞元素選擇器

我們來根據上方的一些選擇器做一個純css的選項卡, 話不多說效果如圖

至此css3的常用選擇器筆者已經介紹完畢, 歡迎得到交流

C語言--右移左移

12款高效開源Wiki系統推薦，打造團隊知識管理利器

一個開源且全面的C#算法實戰教程

dotnet 基於 DirectML 控制檯運行 Phi-3 模型

自定義MyBatis插件

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

常用的 Git 指令

鼠標控制軟件有可能和虛擬機軟件產生衝突

sm4加密工具類

設計模式專欄 - 行爲型設計模式之策略模式（Strategy Pattern）（表單校驗案例, 策略模式的優缺點）

你不知道的JS專欄 - 函數柯里化(柯里化含義, 作用, 寫法, 大廠面試題)

ES6專欄 - 新的內部方法集合 - Reflect

原生JS專欄 - 原型/原型鏈, 五種繼承模式

# Vue專欄 - 你不知道的組件用法篇(遞歸組件, 動態組件等)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結