CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
1.属性选择器
2.结构伪类选择器
3.伪元素选择器
1.属性选择器
(1)利用属性选择器就可以不用借助于类或者id选择器
必须是input 同时具有value这个属性 选择这个元素
input[value]{
color:pink;
}
(2)属性选择器还可以选择属性=值的某些元素
input[type = text]{
color:pink;
}
(3) 属性选择器可以选择属性值开头的某些元素
选择首先是div 然后具有class属性 并且属性值必须是icon开头的这些元素
div[class^=icon]{
color:pink;
}
<div class='icon1'>小图标1</div>
<div class='icon2'>小图标2</div>
<div class='icon3'>小图标3</div>
<div class='icon4'>小图标4</div>
(4)属性选择器可以选择属性值结尾的某些元素
选择首先是div 然后具有class属性 并且属性值必须是data结尾的这些元素
div[class$=data]{
color:pink;
}
<div class='icon1-data'>小图标1</div>
<div class='icon2-data'>小图标2</div>
<div class='icon3'>小图标3</div>
<div class='icon4'>小图标4</div>
(5)选择具有该属性并含有某某属性值的元素
选择首先是div 然后具有class属性 并且属性值中含有icon的这些元素
div[class*=icon]{
color:pink;
}
<div class='icon1'>小图标1</div>
<div class='icon2'>小图标2</div>
<div class='3'>小图标3</div>
<div class='4'>小图标4</div>
注意:类选择器、属性选择器、伪类选择器,权重为10,div标签选择器权重为1。
2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
(1)选择ul里面的第一个孩子 叫小li的
ul li:first-child {
background-color:pink;
}
(2)选择ul里面的最后一个孩子 叫小li的
ul li:last-child {
background-color:pink;
}
(3)nth-child(n) 选择某个父元素的一个或多个特定的子元素
n 可以是数字,关键字和公式
n 如果是数字,就是选择第n 个子元素,里面数字从1开始…
n 可以是关键字:even 偶数,odd 奇数
n 可以是公式:常见的公式如下( 如果n是公式,则从0开始计算,但是第0 个元素或者超出了元素的个数会被忽略)
ul li:nth-child(2){
background-color:pink;
}
nth-child(2n) :偶数
nth-child(2n+1):奇数
nth-child(5n) :5 10 15...
nth-child(n+5) :从第五个开始(包含第五个)到最后
nth-child(-n+5) :前5个(包含第五个)
(4)E.first-of-type 指定类型E的第一个。
(4)E.last-of-type 指定类型E的最后一个。
(4)E.nth-of-type(n) 指定类型E的第n个
区别:
1.nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配。
2.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ,然后再根据E 找第n个孩子。
小结:
结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ,然后再根据E 找第n个孩子
关于nth-child(n)我们要知道n 是从0 开始计算的,要记住常用的公式
如果是无序列表,我们肯定用nth-child 更多
类选择器、属性选择器、伪类选择器,权重为10。
3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
(1) ::before 在元素内部的前面插入内容。
(2) ::after 在元素内部的后面插入内容。
注意:
before和after创建一个元素,但是属于行内元素(不能直接给他设置大小)。
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法: element::before {}
before和after必须有content 属性
before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为1