02-CSS3选择器

参考资料：

一套企业级UI设计语言和React组件库：https://gitee.com/ant-design/ant-design
同上：https://ant-design.gitee.io/

1. CSS3基础

CSS3完全向下兼容，网络浏览器也还将继续支持CSS2。

CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果，比如动态和渐变，而且可以很简单的设计处现在的设计效果，比如说分栏。

渐进增强：针对低浏览器版本进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。

2. 层级选择器

空格，后代选择器，所有后代元素，如 .box li{ }
>大于号，子代选择器，只有子代元素，如 .box>li{ }
+加号，兄弟选择器，当前元素后面的第一个兄弟元素，如 .child+li{ }
~波浪号，兄弟选择器，当前元素后面所有的兄弟元素，如 .child~li{ }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        .box li{
            border: 1px solid red;
        }
        /* 子代选择器 */
        .box>li{
            border: 1px solid red;
        }
        /* + 当前元素后面第一个兄弟元素 */
        .child+li{
            background: yellow;
        }
        /* ~ 当前元素后面所有的兄弟元素 */
        .child~li{
            background: blue;
        }
        /* p-33333 不会生效，因为不是兄弟元素 */
        .container~p{
            background: red;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>111
            <ul>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </li>
        <li class="child">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

    <div class="container">11111</div>
    <p>p-1111</p>
    <p>p-2222</p>
    <div>
        <p>p-33333</p>
    </div>
</body>
</html>

3. 属性选择器

E[attr]，只使用属性名，但没有确定任何属性值
E[attr="value"]，指定属性名，并指定了该属性的属性值，完全精确匹配
E[attr~="value"]，指定属性名，并且居右属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的 “~” 必须写
E[attr^="value"]，指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]，指定了属性名，并且有属性值，属性值是以value结束的
E[attr*="value"]，指定了属性名，并且有属性值，属性值中包含了value

双引号可加可不加。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 属性选择器[class,,] */
        /* [class]{
            background: yellow;
        } */

        /* div[class]{
            background: yellow;
        } */
        div[class~=box1] {
            background: red;
        }

        input[name]{
            background: yellow;
        }
        input[type=email]{
            background: red;
        }

        /* 模糊匹配 */
        div[class*="b"], p[class*="1"]{
            background: green;
        }
    </style>
</head>

<body>
    <div class="box1">div-111</div>
    <div class="box2">div-222</div>
    <div>div-333</div>
    <div class="box1">div-444</div>
    <div class="box1 box3">div-555</div>
    <p class="p1">p-111</p>
    <p class="p2">p-222</p>
    <p>p-333</p>

    <div>
        <h1>注册</h1>
        账号：<input type="text" name="username"><br>
        密码：<input type="text" name="password"><br>
        年龄：<input type="text" name="age"><br>
        邮箱：<input type="email" name="email"><br>
    </div>
</body>

</html>

3. 伪类选择器

3.1 结构伪类选择器

:first-child，匹配子集的第一个元素，IE7就可以支持
:last-child，匹配父元素中最后一个元素
:nth-child(n)，匹配索引值为n的子元素。索引值从1开始，:nth-child(even) 第偶数个元素，:nth-child(odd) 第奇数个元素
:only-child，这个伪类一般用的比较少，比如div下有且仅有一个p时匹配，如果div下有多个p将不匹配
:root，匹配文档的根元素，在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
:empty，匹配没有任何子元素（包括文本等）的元素，即空标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 940px;
            height: 200px;
            margin: 0 auto;
            background: yellow;
        }
        .box div{
            float: left;
            width: 300px;
            height: 100px;
            background: red;
            margin-right: 20px;
        }
        /* :last-child 找到最后一个元素 */
        .box div:last-child{
            margin-right: 0;
        }

        /* :nth-child(数字) 第几个元素 */
        li:nth-child(2){
            background: blue;
        }
        /* :nth-child(2n) 第偶数个元素，:nth-child(2n+1) 或 2n-1 第奇数个元素 */
        /* :nth-child(even) 第偶数个元素，:nth-child(odd) 第奇数个元素 */
        li:nth-child(odd){
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* :root 代表的就是根 html */
        :root, body{
            background: yellow;
        }
        /* div唯一的孩子p标签 */
        div p:only-child{
            background: blue;
        }
        /* div没有孩子的标签，必须是任何内容都没有 */
        div{
            width: 100px;
            height: 100px;
        }
        div:empty{
            background: red;
        }
    </style>
</head>
<body>
    <div>
        <p>111</p>
        <p>222</p>
    </div>

    <!-- 独生子女 -->
    <div>
        <p>333</p>
    </div>

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

3.2 目标伪类选择器

E:target，选择匹配E的所有元素，且匹配元素被相关URL指向

示例：锚点选择后样式生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            position: fixed;
            right: 0px;
            top: 200px;
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;

        }

        div{
            height: 600px;
            border: 1px solid blue;
        }

        /* 选中锚点目标时，样式生效 */
        div:target{
            background: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#aa">京东秒杀</a></li>
        <li><a href="#bb">双11</a></li>
        <li><a href="#cc">特色优选</a></li>
        <li><a href="#dd">特色广场</a></li>
        <li><a href="#ee">VIP专属</a></li>
    </ul>

    <div id="aa">京东秒杀</div>
    <div id="bb">双11</div>
    <div id="cc">特色优选</div>
    <div id="dd">特色广场</div>
    <div id="ee">VIP专属</div>
</body>
</html>

手风琴效果简约版案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴效果</title>
    <style>
        div.content{
            display: none;
        }
        div.content:target{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <a href="#aaa">aaa</a>
        <div id="aaa" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, adipisci. Deleniti sed natus repudiandae maxime dolorum id, culpa nemo corrupti autem voluptatibus explicabo impedit mollitia, laborum blanditiis quod vero quam?</div>
    </div>
    <div>
        <a href="#bbb">bbb</a>
        <div id="bbb" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, adipisci. Deleniti sed natus repudiandae maxime dolorum id, culpa nemo corrupti autem voluptatibus explicabo impedit mollitia, laborum blanditiis quod vero quam?</div>
    </div>
    <div>
        <a href="#ccc">ccc</a>
        <div id="ccc" class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, adipisci. Deleniti sed natus repudiandae maxime dolorum id, culpa nemo corrupti autem voluptatibus explicabo impedit mollitia, laborum blanditiis quod vero quam?</div>
    </div>
</body>
</html>

3.3 UI元素状态伪类选择器

E:enabled，匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled，匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked，匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection，匹配E元素中被用户选中或处于高亮状态的部分 - 偏向于元素的属性
E:focus，匹配获取焦点的时候会生效样式的E元素

伪类偏向于元素的动作行为，伪元素偏向于元素的属性。实际上CSS3为了区分两者，已经明确规定了伪类用一个冒号:来表示，而伪元素则用两个冒号::来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            /* background: red; */
        }
        input:disabled{
            background: yellow;
        }
        /* 获取焦点的时候会匹配生效样式 */
        input:focus{
            background: blue;
        }
        /* appearance:none 清除掉checkbox默认样式 */
        input[type=checkbox]{
            appearance: none;
            width: 20px;
            height: 20px;
        }
        input:checked{
            background: red;
        }

        /* 修改选中文字背景色 */
        div::selection{
            background: orange;
            color: red;
        }
    </style>
</head>
<body>
    <form action="">
        账号：<input type="text"><br>
        密码：<input type="password"><br>
        记住用户名：<input type="checkbox"><br>

        <input type="submit" disabled>
    </form>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat dicta inventore possimus aperiam sequi quo perspiciatis! Corrupti odio cum magnam obcaecati inventore alias fugit praesentium repellendus hic, consequuntur tempore doloribus.</div>
</body>
</html>

3.4 否定伪类选择器

E:not(s)，匹配所有不匹配简单选择符s的元素E（IE6-8浏览器不支持）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 不是第一个子元素 */
        /* li:not(:first-child){
            background: yellow;
        } */

        /* 不是偶数的子元素 */
        li:not(:nth-child(2n)){
            background: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
</html>