前言
记录一下每天学习到的内容，权当复习总结啦！今天学习的内容是一些常用的选择器。
基本选择器
1.元素选择器
语法格式：元素名{属性:属性值;}
特点：选中页面上所有对应元素名元素
可以选中页面上所有的h2标签，设置字体为红色样式
2.类选择器
语法：.类名{属性:属性值;}
特点：选中页面上拥有该类名的元素，一个元素可以有多个类名
可以选中页面上所有类名为box的元素。
命名规范
- 不可以纯数字开头
- 区分大小写
- 包含数字、字母、下划线、连字符
- 望名知意
3.id选择器
语法：id名{属性:属性值;}
特点：一个元素只能有一个id，一个id名只能在一个页面上出现一次
4.通配符
在没有重置文件的时候，可以将所有元素的边距清零
语法：*{属性:属性值;}
特点：选中页面上所有的元素
5.属性选择器
语法：元素名[属性="属性值"]{属性:属性值;}
特点：方括号里可以只写属性，也可写属性+属性值，在CSS中有三种写法。
5.伪类选择器
适用于兄弟元素是一样的情况
选中第一个元素
语法：p:first-child{属性:属性值;}
选中最后一个p元素
语法：p:last-child{属性:属性值;}
选中前三个
语法：p:nth-child(){属性:属性值;}
特点：括号里可以直接写数字，关键字（odd even），An+B公式
选中第n个元素
语法：p:nth-child(){属性:属性值;}
特点：括号里可以直接写数字，关键字（odd even），An+B公式
适用于兄弟元素不相同时
语法：P:nth-of-type(){属性:属性值;}
特点：
- 先筛选元素，再排序。
- 括号里可以直接写具体的数字，关键字（odd even），An+B公式
6.否定伪类选择器
语法：
- p:not(nth-child()){属性:属性值;}
- p:not(nth-of-type()){属性:属性值;}
特点：除开括号中标明的，其余全部被选中
7.a标签配套伪类选择器
顺序原则：love hate
访问前
a:link{ color:red; }
访问后
a:visited{ color:blue; }
鼠标悬停，移入
a:hover{ color:yellow; }
鼠标点击时
a:active{ color:pink; }
8.伪元素选择器
特点：
- 添加的伪元素相当于是行内元素，无法添加宽高，如果需要设置宽高，需要设置盒子类型display:block;
- 是作为h3的子元素添加
在元素之前添加
语法：h3::before{content:' ';属性:属性值;}
h3::before{ content:'在之前'; corlo:red; }
在元素之后添加
语法：h3::after{ content:' ';属性:属性值;}
h3::after{ content:'在之后'; }
选中第一行文本
语法：h3::first-line{属性:属性值;}
h3::first-line{ color:red; }
选中第一个字
语法：h3::first-letter{属性:属性值;}
h3::first-letter{ color:red; }
选中用户选择部分
语法：h3::selection{属性:属性值;}
h3::selection{ background-color:red; }
组合型选择器
1.子级选择器
语法：div>p{属性:属性值;}
特点：只能一层一层去选
2.后代选择器
语法：div a{属性:属性值;}——两个元素名中间用空格隔开
可以结合伪类选择器一起使用
3.兄弟选择器
语法：p+div{属性:属性值;}
特点：选择p标签后紧挨的元素div——只选择一个
语法：p~div{属性:属性值;}
特点：选择p标签后的所有兄弟元素div
5.并集选择器
语法：h1,div>p, .box{属性:属性值;}
特点：逗号前后是独立的选择器
