CSS第二章选择器

2. CSS选择器（重）

2.1 基本选择器

选择器（selector）

为谁添加样式❗❗------ jquery 中主要使用 CSS 选择器的概念
基本选择器
- 标签选择器
  - 格式：标签名称{}
- 类选择器（重）
  - 格式：.class属性的值{}
- id 选择器
  - 格式：#id属性的值{}
- 通配符（表示所有标签）
  - 格式：*{}

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{
            border: 1px solid red;
            width: 50px;
            height: 50px;
            background-color: green;
        }
        span{
            background-color: rgb(255, 0, 183);
        }
        /* 类选择器 */
        .div2{
            background-color: pink;
        }
        .d2{
            background-color: blue;
        }
        .xiaoer{
            background-color: yellow;
        }
        /* id选择器 */
        #container{
            background-color: orange;
        }
        /* 通配符选择器 */
        *{
            border: 8px solid rgb(0, 225, 255);
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div class="div2 d2 xiaoer">div2</div>
    <div>div3</div>
    <div id="container">div4</div>
    <span>span1</span>
</body>
</html>

2.2 关系选择器

bash 复制代码

<body>
    <div>
        <li>li1</li>
        <li class="li2">li2</li>
        <li>li3</li>
        <li id="li4">li4</li>
        <li>li5</li>
        <span>span1</span>
    </div>
    <li class="li6">li6</li>
    <li>li7</li>
    <li>li8</li>
</body>

父子选择器 （一定是父子关系，不能隔代）
- 格式：父 > 子{}

bash 复制代码

        /* 父子选择器 */
        /* div标签下的所有子元素 */
        div > *{
            background-color: red;
        }
        /* div标签下的所有li标签 */
        div > li{
            background-color: pink;
        }

后代选择器 （祖先下的所有后代都渲染）
- 格式：祖先后代{}

bash 复制代码

        /* 后代选择器 */
        body li{
            background-color: rgb(0, 157, 255);
        }

相邻兄弟选择器 （向下渲染，如果向下相邻的兄弟不为目标标签则不渲染）
- 格式：兄 + 弟{}

bash 复制代码

        /* 相邻兄弟选择器 */
        .li2 + li{
            background-color: rgb(255, 0, 183);
        }
        #li4 + li{
            background-color: rgb(0, 255, 162);
        }

兄弟选择器 （向下渲染所有弟）
- 格式：兄 ~ 弟{}

bash 复制代码

        /* 兄弟选择器 */
        .li6 ~ li{
            background-color: rgb(255, 0, 183);
        }

2.3 属性选择器

bash 复制代码

<body>
    <li class="a">li1</li>
    <li class="ab">li2</li>
    <li class="abc">li3</li>
    <li class="abcd">li4</li>
    <li title="123">li5</li>
</body>

基本属性选择器
- 格式： $属性名$ {}

bash 复制代码

        /* 基本属性选择器 */
        [class]{
            background-color: rgb(255, 0, 183);
        }
        [title]{
            background-color: rgb(0, 255, 162);
        }

属性=值
- 格式： $属性 = "值"$ {}

bash 复制代码

        /* 属性=值 */
        [class="ab"]{
            background-color: rgb(0, 174, 255);
        }

以 ** 开头
- 格式： $属性 \^= "值"$ {}

bash 复制代码

        /* 以**开头 */
        [class^="ab"]{
            background-color: rgb(0, 255, 38);
        }

以 ** 结尾
- 格式： $属性 $= "值"$ {}

bash 复制代码

        /* 以**结尾 */
        [class$="d"]{
            background-color: rgb(255, 174, 0);
        }

**包含 ** **
- 格式： $属性 \*= "值"$ {}

bash 复制代码

        /* 包含** */
        [class*="b"]{
            background-color: rgb(187, 255, 0);
        }

2.4 复合选择器

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{
            width: 100px;
            height: 100px;
            border: 2px solid rgb(255, 174, 0);
        }
    </style>
</head>
<body>
    <div class="div" id="div1">div1</div>
    <div class="div">div2</div>
    <span>span1</span>
</body>
</html>

交集
- 格式：选择器1选择器2......选择器n{}
  
  满足所有选择器的目标

bash 复制代码

        /* 既满足类选择器.div又满足id选择器#div1的元素 */
        .div#div1{
            background-color: rgb(255, 0, 234);
        }

并集
- 格式：选择器1,选择器2,......,选择器n{}
  
  只要满足并集中的选择器的目标都渲染

bash 复制代码

        div,span{
            background-color: rgb(0, 255, 208);
        }

2.5 伪类选择器:（难）

伪类：之前渲染的都是某个元素，而伪类渲染的是某一行为（如：鼠标悬停、点击、按压等）

伪类选择器	说明
`:hover`	鼠标悬停状态
`:active`	鼠标按压不放状态
`:focus`	获得焦点时的状态
`:blur`	失去焦点时的状态
`:first-child`	第一个子元素
`:last-child`	最后一个子元素
`:first-of-type`	相同类型的第一个元素
`:last-of-type`	相同类型的最后一个元素
`:nth-child(n/odd/even)`	指定索引的子元素
`:nth-last-child`	指定索引的子元素（反向）
`:nth-of-type`	相同类型指定的索引
`:nth-last-of-type`	相同类型指定的索引（反向）
`:empty`	无子元素
`:not(selector)`	不匹配给定选择器
`:lang()`	指定元素
`:root`	文档根元素
`:enabled`	可用状态的表单元素
`:required`	必填表单元素
`:valid`	验证通过的表单元素
`:invalid`	验证未通过的表单元素
`:target`	当前活动的表单元素
`:checked`	勾选状态下的表单元素
`:link`	未访问链接（`a` 标签）
`:visited`	已访问过的链接（`a` 标签）

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{
            width: 100px;
            height: 100px;
            border: 2px solid rgb(255, 174, 0);
        }
        div:hover{
            background-color: rgb(255, 0, 234);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

悬停前：

悬停后：

超链接伪类

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>
        /* 未访问时 */
        a:link{
            color: black;
        }
        /* 访问后 */
        a:visited{
            color: red;
        }
        /* 鼠标悬停时 */
        a:hover{
            color: blue;
        }
        /* 鼠标点击时 */
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com?username=admin&password=123456">超链接</a>
</body>
</html>

未访问时：

访问后：

鼠标悬停时：

鼠标点击时：

表单伪类

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>
        /* 密码框获取焦点时 */
        [type^="p"]:focus{
            background-color: rgb(255, 0, 234);
        }

        /* 必填项 */
        [type^="text"]:required{
            border: 2px solid orange;
            width: 200px;
        }

        /* 复选框 */
        [type="checkbox"]:checked{
            width: 100px;
        }
    </style>
</head>
<body>
    <form action="">
        账号：<input type="text" required><br>
        密码：<input type="password"><br>
        昵称：<input type="text"><br>
        <button type="submit">提交</button>
    </form>
    <input type="checkbox">A
    <input type="checkbox">B
    <input type="checkbox">C
</body>
</html>

结构伪类（重）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
</head>
<body>
    <p>这是一个段落</p>
    <li class="class">li1</li>
    <li class="class">li2</li>
    <li class="class">li3</li>
    <li class="class">li4</li>
    <li class="class">li5</li>
    <li class="class">li6</li>

    <div class="box">
        <p>这是一个段落</p>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
    </div>

    <div class="box2">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </div>
</body>
</html>

first-child：找当前目标元素的父元素，父元素下的第一个元素是 li 时则渲染

bash 复制代码

		/* 第一个子元素 */
        li:first-child{
            background-color: rgb(0, 255, 225);
        }

first-of-type：找当前目标元素的父元素，父元素下的第一个相同类型（和目标元素相同）元素为渲染

bash 复制代码

        /* 类型相同的第一个子元素 */
        li:first-of-type{
            background-color: rgb(255, 0, 234);
        }

nth-child（索引）：找父元素，父元素下的元素（所有子元素包含非目标元素），渲染指定索引目标元素

bash 复制代码

        /* 奇数子元素 */
        .box>li:nth-child(odd){
            color: orange;
        }

nth-of-type：找父元素，父元素下相同类型的子元素，渲染指定索引目标元素

bash 复制代码

        /* 类型相同的第n个子元素 */
        .box>li:nth-of-type(4){
            border: 2px solid pink;
        }

not(CSS选择器)：不包含 CSS 选择器的其他目标项

bash 复制代码

        /* 没有class属性的其他元素 */
        li:not([class]){
            background-color: rgb(0, 115, 255);
        }

伪类链式写法

bash 复制代码

        /* 鼠标悬停时在box2中的偶数项时背景颜色变为橙色 */
        .box2>li:hover:nth-child(even){
            background-color: orange;
        }

伪元素::

伪元素	作用	适用元素	核心限制
`::before`	在元素内部开头生成虚拟元素	所有容器类元素	必须设置 content，默认行内元素
`::after`	在元素内部末尾生成虚拟元素	所有容器类元素	必须设置 content，常用于清浮动
`::first-letter`	选中段落首个文字字符	块级文本元素 (p、div 等)	仅文字、背景样式可用，支持浮动放大
`::first-line`	选中段落第一行全部文本	块级文本元素	无法修改 margin、width、border 等盒模型属性
`::selection`	鼠标框选的文本区域	全局所有文字	仅允许 color、background、text-shadow
`::placeholder`	表单占位提示文字	input、textarea	无法修改布局尺寸
`::marker`	修改列表项目符号	ul li、ol li	仅能设置字体、颜色、间距
`::backdrop`	弹窗底层遮罩层	dialog、全屏媒体标签	仅弹窗显示时生效
`::cue`	视频内嵌字幕样式	video	仅作用于视频字幕文本

伪类具备链式写法，伪元素无

伪类可以与伪元素混用，但伪元素要放在伪类选择器后面

CSS第二章 选择器

2. CSS选择器（重）

2.1 基本选择器

2.2 关系选择器

2.3 属性选择器

2.4 复合选择器

2.5 伪类选择器:（难）

伪元素::

CSS第二章选择器