CSS3层叠样式表

css3新增的选择器

属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样可以不借助类或者id选择器

属性选择器匹配规则：

E[att]                具有att属性的E元素，多个属性选择：E[att1][att2]

E[att=val]         具有att属性且属性值为val的E元素

E[att^=val]       具有att属性且属性值以val开头的E元素

E[att$=val]       具有att属性且属性值以val结束的E元素

E[att*=val]       具有att属性且属性值包括val的E元素

属性选择器的权重要高于标签选择器，属性选择器的权重是10，标签选择器权重为1

解构伪类选择器

解构伪类选择器主要根据文档解构来选择元素，常用于根据父级来获取容器里面的子元素，优先级为1 0

选择器                                       简介

E:first-child                                匹配父元素中的第一个E元素

E:last-child                                匹配父元素中的最后一个E元素

E:nth-child(n)                           

匹配父元素中的第n个子元素E。n可以是数字，n也可以是公式。odd表示奇数，even表示偶数。table tr:nth-child(odd)--奇数行，table tr:nth-child(even)--偶数行。

table tr:nth-child(n)--参数n代表所有行。n从0开始[n=0没有数据]，依次是0,1,2,3...

公式实现奇数:2n+1,偶数:2n

从第三行起后面的行:n+3

前5行:-n+5

E:nth-last-child(n)                     匹配倒数第n个子元素

E:first-of-type                           指定类型E的第一个，先按照元素分组，然后匹配每个分组中的第一个E元素

E:last-of-type                           指定类型E的最后一个

E:nth-of-type                            指定类型E的第n个

first-child和first-of-type 的区别?

first-child:匹配的是父类元素中的第一个子元素，并不关心类型

first-of-type:匹配的是父类元素内的第一个该类型的元素

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构

::before---匹配被选择元素的内容前面插入内容，可以与content配合使用

::after---匹配被选择的元素内容后面插入内容，可以与content配合使用

伪元素特点：

1、伪元素要配合content属性一起使用。
2、before和after创建一个元素，但是属于行内元素。
3、伪元素只能给双标签添加，不能给单标签添加，比如img或br元素
4、伪元素不会出现在DOM中，所以不能通过JS来操作，仅仅是在css渲染层加入。
5、伪元素选择器和标签选择器一样，权重为1。

.line::before {content: "";display: inline-block;width: 200px;border: 1px solid #000;
}
.line::after{content: "";display: inline-block;width: 200px;border: 1px solid #000; <h2 class="line">这是一个分隔线</h2>

CSS3样式

CSS3边框

通过 CSS3，能够创建圆角