CSS3之选择器
属性选择器
属性选择器的作用:当多个标签一样,且想让部分标签实现某种样式,我们一开始会在要改变的标签里起一个类名,然后在style中调用。
现在不必那么麻烦,可以直接使用属性选择器。
使用:
选择符 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[att= *val"] | 选择具有att属性且属性值等于va的E元素出 |
E[att^=“val”] | 匹配具有att属性、且值以val开头的元素 |
E[att$= *val"] | 匹配具有att属性、且值以val结尾的E元素 |
E[att* =“val”] | 匹配具有att属性、且值中含有val的元素 |
类选择器、属性选择器、伪类选择器。权重为10
结构伪类选择器
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型的最后一个 |
Enth-of -type(n) | 指定类型E的第n个 |
nth-child ( n )
●n可以是数字,关键字和公式
●n如果是数字,就是选择第几个
●常见的关键词有even偶数 ,odd 奇数
●常见的公式如下(如果n是公式.则从0开始计算)
●但是第0个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15… |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5个) … |
伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
●before 和after必须有content属性
●before 在内容的前面, after 在内容的后面
●before和after创建一个元素 .但是属于行内元素。
●因为在 dom里面看不见刚才创建的元素,所以我们称为伪元素
●伪元素和标签选择器一样,权重为1