大家好，我是lotus，我是一名热爱技术、热衷学习的前端开发者。
每周我都会在这里与大家分享一些我在日常工作学习、项目实践中的心得与经验。无论你是刚刚入门的新手，还是已经有一定经验的老手，我都希望我的文章能够为你带来一些启发或帮助。
在这个快速变化的技术世界里，持续学习和分享是保持进步的关键。
我坚信，通过分享，我们不仅能够帮助他人，也能让自己不断成长。
最近从一家国企跳槽到了现在这家中等半国企互联网公司，这两天拉下项目代码发现自己对css里面一些选择器的用法记忆不是很清晰。于是想写一篇文章来简要的介绍并复习css里面选择器的用法。
常用的选择器
1.通配符选择器
通配符选择器常用 "*"，它是所有选择器里作用范围最广的，会匹配页面中所有的元素。
例如
当使用通配符选择器定义样式，会清除所有HTML标记的默认边距。
* {
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
2.标签选择器
顾名思义，标签选择器就是利用html的标签名作为选择器。标签选择器内的属性会应用到文件内的所有同类标签中。
例如
当使用标签选择器时，会快速统一的为页面内所有标签添加相同样式。
p {
font-stretch: normal;
font-size: 16px;
color: #1989fa;
}
3.类选择器
通过'.'的方式在css中定义一个样式类，并通过class关键词应用到HTML标签中。定义的样式只对使用该类的html元素生效。多个标签可以使用相同的class类型，样式会同时生效。单个标签可以使用多个class类型，多个class类型对应的样式会同时生效。
例如
使用单个样式类名和使用多个样式类名
4.id选择器
id选择器在css中使用“#”+ id名称定义类型，在html中使用id=类型名称应用该样式类型。
例如
当使用id选择器时，会为页面内所有使用该id选择器的html标签添加相同样式。
5.群组选择器
同时选中对应选择器的元素，同时应用相同的属性。如果后续属性要修改可以通过覆盖的方式
例如
会同时为选中的元素添加相同的属性。
6.后代选择器
后代选择器写在父元素后面，只会对父元素内的子元素生效。
例如
p标签内的样式会对box1内的所有p标签生效。
7.子元素选择器
子元素选择器写在父元素后面，仅仅只会对父元素内的子元素标签生效，对跨层级的标签不生效。
例如
子元素选择器p标签内的样式会对box1内的p标签111和p标签333生效。对p222跨层级标签不生效。
8.伪类选择器
通过'：'+伪类名称的方式定义伪类选择器。
例如
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)
n第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
.box :first-child{
font-size: 20px;
color: #fff;
margin-left: 15px;
}
/* box下面的第1个子元素是li的时候变*/
.box li:first-child{
color: #fff;
}
/* box下面的最后1个子元素变 */
.box :last-child{
color: green;
}
/* box下面的第3个子元素变 */
.box :nth-child(3){
color：blue;
}
