2.1属性选择器(类选择器,属性选择器,伪类选择器他们的权重都是10)
使用方法:标签名[ 属性名 ] { 样式 }
标签名[ 属性名="属性值" ] { 样式 }
标签名[ 属性名^="属性值" ] { 样式 }(以该属性开头的)
标签名[ 属性名$="属性值" ] { 样式 }(以该属性结尾的)
标签名[ 属性名*="属性值" ] { 样式 }(只要包含就选定 不论位置)
2.2结构伪类选择器
使用方法:标签名:first-child{样式} 父元素下的第一个孩子
标签名:last-child{样式} 父元素下的最后一个孩子
标签名:nth-child(x){样式} 父元素下的第x个孩子 x可以是数字可以是关键字(even偶数 odd奇数)可以是公式(x从0开始) 第0个元素或者超出元素个数就会被忽略 nth-child(n)选择父元素里面的第n个孩子,不管里面的孩子是否同一种类型
标签名:first-of-type{样式} 指定类型下的第一个孩子
标签名:first-of-type{样式}指定类型下的最后一个孩子
标签名:nth-of-tyoe(x){样式} 指定类型下的第x个孩子 x同nth-child(x)中的x
2.3伪元素选择器
::after 在元素内部的后面插入内容
::before 在元素内部的前面插入内容
before和after都必须有content属性;
before和after都创建一个元素,但是都属于行内元素;
因为我们在dom中看不到这个元素,所以称之为伪元素;
伪元素和标签选择器一样,权重都是1;