选择器

选择器是什么

选择器就是选择元素的⽅式。
选择元素⽅式的多样化造成选择器的多样化

选择器的分类（28个选择器）

1.全局选择器

通配符 *：全局选择器就是通配符，通配符用于选择所有元素
*{
}
示例：匹配body下所有的元素

 body *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

2.基础选择器

元素选择器：选择器所有标签
id选择器：选择一个标签
class选择器：选择一组标签

3.属性选择器

属性选择器：
1.通过标签的属性匹配元素。
2.所有属性选择器都以方括号开头。
1.[属性]

[target]{/*选择带有 target 属性的所有元素。*/
 样式
}

2.[属性=属性值] {}

[target=_blank] 选择带有 target="_blank" 属性的所有元素。

1. [属性^=属性值] {}

a[href^="https"] 选择其 href 属性值以 "https" 开头的每个 <a> 元素。

1. [属性$=属性值]

a[href$=".pdf"] 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。

5.[attribute~=value] [title~=flower] 选择带有包含 "flower" ⼀词的 title 属性的所有元素。
6.[attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。
7.[attribute*=value]

示例：将属性为title的所有元素都设置上前景色。

[title]{
            color: rgb(81, 150, 182);
        }

示例：将属性title的属性值为二级标题的所有元素都设置上背景色。

[title=二级标题]{
            color: cadetblue;
        }

示例：将属性target的属性值为_blank的所有元素都设置上删除线。
超链接的原有属性的value值要添加引号。

[target="_blank"]{
            text-decoration: line-through;
        }

示例：将属性href的属性值为http://www.baidu.com的所有元素都设置上前景色。
^：指定了属性名，并且有属性值，属性值是以http://www.baidu.com开头的；

a[href^="http://www.baidu.com"]{
            color: black;
        }

示例：将属性target的属性值为"_blank"的所有元素都设置上前景色。
$：指定了属性名，并且有属性值，属性值是以_blank结尾的；

 a[target$="_blank"]{
            color: rgb(188, 95, 95);
        }

示例：将属性href的属性值结尾为net的所有元素都添加文字。
$：指定了属性名，并且有属性值，属性值是以net结尾的；

 [href$=net]::after{
            content: "我爱你";
        }

4，伪类选择器

伪类选择器的标志就是单冒号：
只能匹配元素不能创建元素

:link：匹配未点击的超链接
:hover：匹配悬停/悬浮状态的元素
:active：匹配激活状态（鼠标按下）的元素
:visited：匹配访问过（抬起鼠标）的超链接
:focus ：匹配焦点元素（不是所有元素都拥有焦点，像表单标签，超链接都拥有焦点）
:ntn-child ：匹配第n个子元素
:flrst-child：匹配第一个子元素
:last-child：匹配最后一个子元素
:root :匹配根元素
:not() :匹配不是某个元素的元素
:checked:匹配选中的元素

超链接伪类

<style>
        /* 1.匹配未点击的超链接 */
        a:link{
            color: cadetblue;
        }
        /* 2.匹配悬停/悬浮状态的元素 */
        a:hover{
            color: #000;
        }
        /* 3. 匹配激活状态（鼠标按下）的元素*/
        a:active{
            color: cornflowerblue;
        }
        /* 4.匹配访问过（抬起鼠标）的超链接 */
        a:visited{
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    网易云
</body>

:focus 实列

点击之后触发焦点元素，修改背景色

  input:focus{
            background-

携卷:
            color: rgb(81, 150, 182);
        }

示例：将属性title的属性值为二级标题的所有元素都设置上背景色。

[title=二级标题]{
            color: cadetblue;
        }

示例：将属性target的属性值为_blank的所有元素都设置上删除线。
超链接的原有属性的value值要添加引号。

[target="_blank"]{
            text-decoration: line-through;
        }

示例：将属性href的属性值为http://www.baidu.com的所有元素都设置上前景色。
^：指定了属性名，并且有属性值，属性值是以http://www.baidu.com开头的；

a[href^="http://www.baidu.com"]{
            color: black;
        }

示例：将属性target的属性值为"_blank"的所有元素都设置上前景色。
$：指定了属性名，并且有属性值，属性值是以_blank结尾的；

 a[target$="_blank"]{
            color: rgb(188, 95, 95);
        }

示例：将属性href的属性值结尾为net的所有元素都添加文字。
$：指定了属性名，并且有属性值，属性值是以net结尾的；

 [href$=net]::after{
            content: "我爱你";
        }

5.伪元素选择器

伪元素选择器的标志是双冒号
可以创建元素

::after
::before
::first-line：选中的第一段。
::first-letter ：选中第一个。

::first-letter的示例：选中段落p的第一个文字。

 p::first-letter{
            font-size: 2rem;
            color: rgb(110, 63, 1);
        }

::first-letter的示例：选中段落p的第一段文字设置上划线。

 p::first-line{
            text-decoration: overline;
        }

6.组合选择器

组合选择器就算把上面五类选择器放在一起使用

1.分组选择器：使用逗号组合（匹配到使用逗号分割的每一项）
2.后代选择器：使用空格组合（匹配当前元素的所有后代元素）
3.子元素选择器：使用 > 组合（匹配当前元素的所有子元素）
4.相邻兄弟选择器：使用 + 组合（匹配当前元素后面的兄弟元素）

选择器