CSS3之选择器

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