CSS3知识点:
CSS3的相关属性不兼容低版本浏览器，IE9以下是不兼容的，在实际开发中要特别注意，移动端支持优于PC端，是在CSS2上新增的属性，关于兼容这里有两个名词需要了解：
渐进增强 ：（针对低版本浏览器进行页面构建，保证最基本的功能，再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验）；
优雅降级（一开始就构建完整的功能，然后再针对低版本浏览器进行兼容）
新增选择器：
结构伪类选择器：
通常选择的是某指定的元素
<style>
li:first-child {/* 1选中某元素（li）的父级（爸爸）的第一个子级元素（儿子）*/
background: yellow;
}
li:last-child {/* 2选中某元素（li）的父级（爸爸）的最后一个子级元素（儿子）*/
background: skyblue;
}
li:nth-child(3) {/*3 选中某元素（li）的父级（爸爸）的第3个子级元素（儿子，没有0*/
background: rgb(159, 41, 157);
}
li:nth-last-child(2) {/* 4选中某元素（li）的父级（爸爸）的倒数第2个子级元素（儿子）*/
background:rgb(221, 42, 102);
}
/*需要注意的是：上面括号中的数字可以是关键词或公式，如event表示偶数，则选中的是第偶数个，odd表示的是奇数，则选中的是第奇数个*/
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<style>
div span:first-of-type {/* 选中某类型(span)的第一个元素*/
color: yellow;
}
div span:last-of-type {/* 选中某类型(span)的最后一个元素*/
color: yellow;
}
div span:nth-of-type(2) {/* 选中某类型(span)的第2个元素*/
color: yellow;
}
</style>
<body>
<div>
<p>测试1</p>
<span>测试2</span>
<div>测试3</div>
<h2>测试4</h2>
<p>测试5</p>
<span>测试6</span>
<div>测试7</div>
<h2>测试8</h2>
<p>测试9</p>
<span>测试10</span>
<div>测试11</div>
<h2>测试12</h2>
</div>
</body>
属性选择器：
选取标签带有某些特殊属性的元素
<style>
li[class] {/*1选中带有class属性的元素*/
background: blue;
}
li[class=list2] {/*2选中带有class属性且属性值为list2的元素*/
font-size: 50px;
}
li[class^=lis] {/*3选中带有class属性且属性值是以lis开头的元素*/
font-size: 50px;
}
li[class$=st2] {/*4选中带有class属性且属性值是以st2结尾的元素*/
list-style: none;
}
li[class*=t] { /* 5选中带有class属性且属性值中有t的元素*/
text-decoration: underline;
}
li[class~='tab'] {/* 5选中class属性值中有tab属性值的元素*/
font-size: 40px;
color: yellow;
}
li[id="box1"] { /* 5选中带有id属性且属性值为box1的元素*/
text-decoration: underline;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li class="list1">2</li>
<li>3</li>
<li class="list2">4</li>
<li class="box4 tab">5</li>
<li class="test2">6</li>
<li class="box1 tab">7</li>
<li id="box1">8</li>
</ul>
</div>
</body>
伪元素选择器：
标签后面带有四个点
<style>
p::first-letter {/*p::first-letter 1选中p元素中文本的第一个字或者单词*/
font-size: 50px;
}
p::first-line {/*p::first-line 2选中p元素中第一行文本*/
text-decoration: underline;
}
p::selection {/*p::selection 3选中p元素中鼠标选中的文本*/
background: skyblue;
color: white;
}
</style>
<body>
<p>
今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。
今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。
今天给大家介绍一下伪元素选择器，伪元素选择器后面带有四个小点，类选择器带有一个小点 ，伪类带有两个小点。
</p>
</body>
:focus用来选取有获取焦点的元素，一般和input搭配使用：
<style>
input:focus {
background: skyblue;
}
</style>
<body>
<input type="text" value="">
</body>
before和after伪元素：
这两个是比较常用的，他们必须要有content属性否则无效，content可以空着（字体图标中的编码可以写到content里面），其本质是在一个标签内容前或后添加新内容，它们默认是行内元素，当display转换后，可以设置对应的属性。
<style>
div::before {/*before在元素的前面添加内容，前面的四个点可以省略写两个，但是浏览器会默认补为四个点*/
content: '我';
background: skyblue;
font-size: 40px;
display: block;
}
div::after {/*after在元素的后面添加内容*/
content: '十八岁！';
font-size: 30px;
background-color: rgb(94, 235, 230);
}
</style>
<body>
<div>今年</div>
</body>
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
