CSS3(一)---属性选择器、结构伪类选择器、伪元素选择器

CSS3

属性选择器、结构伪类选择器、伪元素选择器、2D转换、动画、3D装换、浏览器私有转换

CSS3是在CSS2上进行扩展

1. 属性选择器

属性选择器权重是10，类选择器、伪类选择器(属性选择器：权重高于标签选择器)
disabled = “disabled”   //禁用
比如：button[disabled]  { }     元素[属性] { }

选择符:
E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性并且属性值等于val的E元素
E[att^=”val”] 匹配具有att属性，且值以val开头的E元素
E[att$=”val”] 匹配具有att属性，且值以val结尾的E元素
E[att*=”val”] 匹配具有att属性、且值中含有val的E元素

2、结构伪类选择器

E:first-child 匹配符元素中的第一个子元素E 比如：ul li:first-child {}
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配到父元素中的第n个子元素E li:nth-child(7)
E:first-of-type 指定类型E的第一个 div span:first-of-type { }
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 div span:nth-of-type(2) {…} 权重：12

E:nth-child(n)： (div下第一个，第二个，不管标签相不相同；不管理里面孩子是否属于同一类型。) 选择 父元素里面的 第 n 个孩子，不管里面的孩子是否同一种类型
n是关键词
E:nth-child(even) :even是偶数个标签 odd奇数标签
n是公式，从0 开始
为n时选择所有 li:nth-child(n) { …}
2n 偶数， li:nth-child(2n) { …} //第0个元素，或者超出了元素个数会被忽略
2n+1 奇数，li:nth-child(2n+1){…} 类似于odd
5n 5,10,15 li:nth-child(5n)
n+5 从第5个开始（包含第五个）到最后
-n+5 前5个（包含第5个）
如果ul中有10个li,（ul里只嵌套li）用E:nth-child(n)、E:nth-of-type(n)就一样了

3. 伪元素选择器

：before 在元素内内部的前面插入内容
：after 在元素内部的后面插入内容

使用:

div::before {
        
	content: ”我”;
	.......
}    

伪类选择器注意事项:

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

<style>
p {
     
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
        }
 p::after {
     
            content: '\ea50';
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
        }
</style>
<p></p>