CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素

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>