CSS选择器基础知识

代码演示效果链接：

简单选择器

上下文选择器

伪类选择器-不分组匹配

伪类选择器-分组匹配

其它伪类选择器

1. 简单选择器

简单选择器优先级：标签 < class属性 < id属性

序号	选择器	描述	举例
1	元素选择器	根据元素标签名称进行匹配	`div {...}`
2	群组选择器	同时选择多个不同类型的元素	`h1,h2,h3{...}`
3	通配选择器	选择全部元素,不区分类型	`* {...}`
4	属性选择器	根据元素属性进行匹配	`*[...]`
5	类选择器	根据元素 class 属性进行匹配	`*.active {...}`
6	id 选择器	根据元素 id 属性进行匹配	`*#top {...}`

元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

2. 上下文选择器

序号	选择器	操作符	描述	举例
1	后代选择器	`空格`	选择当前元素的所有后代元素	`div p`, `body *`
2	父子选择器	`>`	选择当前元素的所有子元素	`div > h2`
3	同级相邻选择器	`+`	选择拥有共同父级且相邻的元素	`li.red + li`
4	同级所有选择器	`~`	选择拥有共同父级的后续所有元素	`li.red ~ li`

3. 伪类选择器

3.1 不分组匹配

序号	选择器	描述	举例
1	`:first-child`	匹配第一个子元素	`div :first-child`
2	`:last-child`	匹配最后一个子元素	`div :last-child`
3	`:only-child`	选择元素的唯一子元素	`div :only-child`
4	`:nth-child(n)`	匹配任意位置的子元素	`div :nth-child(n)`
5	`:nth-last-child(n)`	匹配倒数任意位置的子元素	`div :nth-last-child(n)`

3.2 分组匹配

序号	选择器	描述	举例
1	`:first-of-type`	匹配按类型分组后的第一个子元素	`div :first-of-type`
2	`:last-of-type`	匹配按类型分组后的最后一个子元素	`div :last-of-type`
3	`:only-of-type`	匹配按类型分组后的唯一子元素	`div :only-of-type`
4	`:nth-of-type()`	匹配按类型分组后的任意位置的子元素	`div :nth-of-type(n)`
5	`:nth-last-of-type()`	匹配按类型分组后倒数任意位置的子元素	`div :nth-last-of-type(n)`

3.3 其它伪类

序号	选择器	描述
1	`:active`	向被激活的元素添加样式
2	`:focus`	向拥有键盘输入焦点的元素添加样式
3	`:hover`	当鼠标悬浮在元素上方时，向元素添加样式
4	`:link`	向未被访问的链接添加样式
5	`:visited`	向已被访问的链接添加样式
5	`:root`	根元素,通常是`html`
5	`:empty`	选择没有任何子元素的元素(含文本节点)
5	`:not()`	排除与选择器参数匹配的元素

CSS选择器应用实例

<!--简单选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单选择器</title>
    <style>
        /* 元素选择器:根据元素标签名选择 */
        h2 {
            color: hotpink;
        }
        /*群组选择器:同时选择多个，用逗号隔开*/
        h2, ul {
            background-color: grey;
        }
        /*通配选择器,选择全部元素*/
        * {
            width: 400px;
        }
        /* 属性选择器: 元素属性--class, id, title... */
        [title="one"] {
            color: #55a532;
        }
        /*类选择器:按照元素的class属性选择*/
        .item {
            color: red;
        }
        /*id选择器:根据元素id属性选择--# + id值*/
        #ba {
            color: yellow;
        }
        /* 多个类选择器:两个点，不要有空格 */
        .item.ttu {
            background-color: #fff;
        }
        /*简单选择器优先级：标签 < class属性  < id属性*/
        span {
            background-color: forestgreen;
        }
        #sau {
            background-color: red;
        }
        .utien {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<h2>购物清单</h2>
<ul>
    <li title="one">用title属性选择，设置字体颜色</li>
    <li class="item">用class属性选择，设置字体颜色</li>
    <li id="ba">用id属性选择，设置字体颜色</li>
    <li class="item ttu">演示多个类选择器</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<span class="utien" id="sau">合计：用来演示选择器优先级</span>
</body>
</html>
<!--上下文选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>上下文选择器</title>
    <style>
        /*后代选择器`空格`：选择当前元素的所有后代元素*/
        ul a {
            color: red;
        }
        /*父子选择器`>`：选择当前元素的所有子元素;span不会被选中*/
        ul > a {
            color: yellow;
        }
        /*同级相邻选择器`+`：选择拥有共同父级且相邻的元素 */
        .haiba + a {
            color: greenyellow;
        }
        /*同级所有选择器`~` ：选择拥有共同父级的该元素之后的所有元素*/
        .ba ~ a {
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<ul>
    <a href="">1</a>
    <li>
        <a href="">2.1</a>
        <a href="">2.2</a>
        <a href="" class="haiba">2.3</a>
        <a href="">2.4</a>
        <a href="">2.5</a>
        <a href="">2.6</a>
        <div>
            <a href="" class="ba">3.1</a>
            <a href="">3.2</a>
            <a href="">3.3</a>
        </div>
    </li>
</ul>
</body>
</html>
<!--伪类选择器-不分组匹配-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器-不分组匹配</title>
    <style>
        /*grid画九宫格*/
        .container {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        /* 类选择器 */
        .item {
            font-size: 2rem;
            background-color: #0086b3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*匹配第一个子元素:`:first-child`*/
        .container > :first-child {
            color: red;
        }
        /*匹配最后一个子元素:`:last-child`   */
        .container > :last-child {
            color: greenyellow;
        }
        /*选择元素的唯一子元素:`:only-child` */
        /*匹配任意位置的子元素:`:nth-child(n)`*/
        .container > :nth-child(5) {
            color: yellow;
        }
        /*匹配任意位置的子元素-表达式:`:nth-child(2n、ven)偶数`*/
        .container > :nth-child(2n) {
            font-size: 40px;
        }
        /*匹配任意位置的子元素-表达式:`:nth-child(2n-1、odd)奇数`*/
        .container > :nth-child(2n-1) {
            font-size: 5px;
        }
        /*表达式选择前3*/
        .container > :nth-child(-n + 3) {
            border-radius: 10px;
        }
        /*表达式选择后2*/
        .container > :nth-child(-n + 3) {
            border-radius: 10px;
        }
        /*匹配倒数任意位置的子元素:`:nth-last-child(n)`*/
        .container > :nth-last-child(3) {
            background-color: #fff;
        }
        /* 从第6个开始,选择剩下的所有元素 */
        .container > :nth-child(n + 6) {
            border: 5px solid coral;;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>
<!--伪类选择器-分组匹配-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器-分组匹配</title>
    <style>
        /*grid画九宫格*/
        .container {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        /* 类选择器 */
        .item {
            font-size: 2rem;
            background-color: #0086b3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*`:first-of-type`:匹配按类型分组后的第一个子元素*/
        .container > div:first-of-type{
            color: red;
        }
        /*`:last-of-type`:匹配按类型分组后的最后一个子元素*/
        .container > div:last-of-type{
            color: greenyellow;
        }
        /*`:only-of-type`:匹配按类型分组后的唯一子元素*/
        /*`:nth-of-type()`:匹配按类型分组后的任意位置的子元素*/
        .container > span:nth-of-type(2){
            color: yellow;
        }
        /* span分组前三个 */
        .container span:nth-of-type(-n + 3) {
            background-color: grey;
        }
        /*`:nth-last-of-type()`:匹配按类型分组后倒数任意位置的子元素*/
        .container div:nth-last-of-type(-n + 2) {
            background-color: coral;
        }
        .container > div:first-of-type:hover {
            background-color: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <!-- 分为二组 -->
    <span class="item">5</span>
    <span class="item">6</span>
    <span class="item">7</span>
    <span class="item">8</span>
    <span class="item">9</span>
</div>
</body>
</html>
<!--其它伪类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其它伪类选择器</title>
    <style>
        /*:root-指html*/
        :root {
            background-color: lightgreen;
        }
        /*enabled：可用*/
        input:enabled {
            background-color: blanchedalmond;
        }
        /*disabled：禁用*/
        input:disabled {
            background-color: lightgreen;
        }
        /*required：必填*/
        input:required {
            background-color: yellow;
        }
    </style>
</head>
<body>
<h3>用户登录</h3>
<form action="" method="post">
    <div>
        <label for="email">邮箱:</label>
        <input
                type="email"
                id="email"
                name="email"
                required
                placeholder="example@email.com"
        />
    </div>
    <div>
        <label for="password">密码:</label>
        <input
                type="password"
                id="password"
                name="password"
                required
                placeholder="不得少于6位"
        />
    </div>
    <div>
        <label for="save">保存密码:</label>
        <input type="checkbox" id="save" name="save" checked readonly />
    </div>
    <div>
        <label for="save_time">保存期限:</label>
        <select name="save_time" id="save_time">
            <option value="7" selected>7天</option>
            <option value="30">30天</option>
        </select>
    </div>
    <div>
        <input type="hidden" name="login_time" value="登陆时间戳" />
    </div>
    <div>
        <label for="warning">警告:</label>
        <input
                type="text"
                id="warning"
                value="一天内仅允许登录三次"
                style="border: none;"
                disabled
        />
    </div>
    <script>
        // js未学,暂时忽略,只须知道功能即可: 自动生成时间戳,填充到表单隐藏域中
        document.querySelector('[type="hidden"]').value = new Date().getTime();
    </script>
</form>
</body>
</html>