也具有兼容性问题，IE9+以上才支持，移动端支持优于PC
1、新增属性选择器
-
利用属性选择器可以不借助于id选择器或者类选择器
<input type="text" value="请输入用户名">
<input type="text">
input[value]{}可以给第一个修改样式
2. 可以选择属性=值的某些元素（重点）
<input type="text" name="" id="">
<input type="password" name="" id="">
input[type=text]{}选中第一个，text可以不加引号
3.选择以某些属性值开头的元素，之前用并集选择器
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
input[class^=icon]选中了这四个标签1
4.选择以某些属性值结尾的
<section class="icon1-data">我是安吉拉</section>
<section class="icon2-data">我是戈埃拉</section>
<section class="icon3-icon">我是阿惠</section>
input[class$=data]选择了前两个
5.选择含有的
input[*=]只要含有就会选择出来。
类选择器、属性选择器、伪类选择器 权重都为10
2、新增结构伪类选择器
常根据父元素选择里面的子标签
比如选择ul里面的li,有很多小li。选择第一个小li
/* 选第一个孩子 叫li的 不写Li是指ul的后代选择 */
ul li:first-child {
background-color: pink;
}
last-child最后一个孩子
nth-child(n)选择第n个元素，n可以是数字，公式，关键字。
3.nth-child选择器
nth-child(n)里面的n从0开始，每次增1，往后面计算，0会被自动忽略
公式：
2n表示偶数，2n+1是奇数，5n,n+5从第五个开始，-n+5前五个包含第五个
关键字：
even是偶数，odd奇数
4.nth-child和nth-of-type的区别
section div:nth-child(1) {
background-color: black;
}
nth-child会把所有的孩子先排序，然后再看：前面的标签，如果第一个孩子不是div，则这个样式无效，从右往左看。
section div:nth-of-type(1) {
background-color: blue;
}
先找到div标签，然后再看div的第一个孩子。从左往右看。
5.新增伪元素选择器
帮助我们利用CSS创建新标签元素，而不需要HTML标签，简化了HTML结构。
::before在元素内部前面插入元素
::after在元素内部后面插入元素
这些元素都属于行内元素，新创建的这些元素在文档中找不到，所以我们成为伪元素。
before和after都必须要有content属性。
伪元素选择器和标签选择器一样权重都为1
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
/* 必须要写的 */
content: '我';
}
div::after {
content: '小猪猪'
}
</style>
</head>
<body>
<!-- 放到父盒子里面的内容前面 before都是一个盒子 -->
是
</div>
</body>
可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before 在元素内部前面插入元素
::after 在后面插入
element::before {}
中必须有content属性
伪元素选择器和标签选择器的权重都为1
新增伪元素选择器使用场景
土豆案例的遮罩层，当时用了一个盒子，小米侧边栏的>，清除浮动
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
