17-css选择器css选择器分类基础选择器：标签选择器、类选择器、id选择器、属性选择器、伪类选择器、伪元素选择器

css选择器

基础选择器

标签选择器：通过标签名找到对应的标签作用样式
```
标签名{
    css样式代码
}
```
类选择器：通过class名找到对应的标签作用样式
```
.class名{
    css样式代码
}
/* 找到身上既有class名1又有class名2的标签 */
.class名1.class名2{
     css样式代码
}
```
- 一般用于提取公共样式
- 一个标签上可以取多个类名，类名和类名之间使用空格隔开
- 多个类名放在一起，中间没有空格，表示即有类名1又有类名2的标签
id选择器：通过id名找到对应的标签作用样式
```
.id名{
    css样式代码
}
```
- 唯一性，在一个页面中只能有一个标签取名一个id
属性选择器：通过标签中的属性名或属性值找到对应的标签作用样式

名字	含义
`[属性名]`	找到带有指定属性名的标签
`[属性名=属性值]`	找到带有指定属性名和属性值的标签[精确匹配]
`[属性名*=属性值]`	找到带有指定属性名中含有指定属性值的标签[模糊匹配]
`[属性名^=属性值]`	找到带有指定属性名中以指定属性值的开头的标签
`[属性名$=属性值]`	找到带有指定属性名中以指定属性值的结尾的标签

  <style>
        /* 1.找到带有属性名的标签 */
        [class]{
            color: pink;
        }
        /* 2.找到带有属性名和属性值的标签[精确匹配] */
        [class=p1]{
            color: red;
        }
        /* 3.找到属性名中含有属性值的标签[模糊匹配] */
        [class*=p]{
            color: green;
        }
        /* 4.找到属性名中以指定属性值开头的标签 */
        [class^=t]{
            color: blue;
        }
        /* 5.找到属性名中以指定属性值结尾的标签*/
        [class$=e]{
            color: yellow;
        }
    </style>
<body>
    <p class="one">p1</p>
    <p class="two">p2</p>
    <p class="three">p3</p>
</body>

伪类选择器：给浏览器的标签添加功能性内容

名字	含义
`:link`	超链接访问之前的样式
`:visited`	超链接访问之后的样式
`:hover`	鼠标悬停时样式
`:active`	鼠标左键选中时样式(元素激活)
`:focus`	输入框聚焦时样式

注意：link和visited只能添加给超链接；focus只能添加给输入框
注意设置顺序：l-v-h-a :注意顺序:hover只能设置在link和visited之后,active只能设置在hover之后
伪元素选择器：通过css技术，在标签开头或结尾渲染一块区域，作用css样式

名字	含义
`::before`	在元素开头位置渲染一块区域
`::after`	在元素结尾位置渲染一块区域
`::first-letter`	标签中第一个字符添加样式
`::first-line`	标签中第一行字符添加样式
`::selection`	标签中选中区域添加样式

::before和::after中必须添加固定代码content
通配符：找到页面中所有标签作用一次样式
```
*{   
css样式代码
}
```

组合选择器

后代选择器：找到指定标签中所有满足条件的后代标签作用样式
- 中间使用``连接
```
//找到box盒子中所有的p标签作用样式
.box p{
}
```
子元素选择器：找到指定标签中所有满足条件的直接子标签作用样式
- 中间使用>连接
```
//找到box盒子中所有的直接子元素p标签作用样式
.box>p{
}
```
相邻兄弟选择器：找到指定标签中的下一个兄弟标签作用样式
- 中间使用+连接
```
//找到.p2标签的下一个相邻兄弟p标签
.p2+p{
}
```
通用兄弟选择器：找到指定标签中后面所有的兄弟标签作用样式
- 中间使用~连接
```
//找到.p2标签后面所有的兄弟p标签
.p2~p{
}
```
并集选择器：多个选择器之间使用逗号隔开，会找到逗号前和逗号后的选择器分别作用一次样式代码
```
span,h1,p{
    css样式代码
}
```