作为网页制作基础,CSS 选择器很强大,用得恰当则事半功倍!本文介绍常用CSS选择器,并在下一篇中根据以往工作经验简单写一些Best practice,供前端er们参考。
基本选择器
通配符:* //匹配任何元素。
标签选择器:div/p/span等 //匹配所有的div/p/span。
class选择器:.xxx //匹配所有class属性包含xxx的元素。
id选择器:#xxx //匹配所有id属性为xxx的元素。组合选择器
多元素选择器: div,p //同时匹配所有div元素或p元素,中间用逗号分隔。
后代元素选择器:div span //匹配所有div元素后代的span元素,中间用空格分隔。
子元素选择器:div > span //匹配所有div元素的子元素span。
毗邻元素选择器:div + p //匹配所有紧随div元素之后的同级p元素。
同级选择器:div ~ p // 匹配任何在div元素后的同级p元素,css3新增。属性选择器
div[data] //匹配全部具有data属性的div元素。
div[data=”value”] //匹配所有data属性值为value的div元素。
div[data~=”value”] //匹配所有data属性具有多个空格分隔的值,并且其中一个值等于value的div元素。
div[data|=”value”] //匹配所有data属性具有多个连字号分隔(hyphen-separated),并且其中一个值以value开头的div元素,主要用于lang属性,比如”en”,”en-us”、”en-gb”等等。
div[data^=”value”] //匹配所有data属性以value开头的元素, css3新增。
div[data$=”value”] //匹配所有data属性data以value结尾的div元素,css3新增。
div[data*=”value”] //匹配所有data属性data包含value结尾的div元素,css3新增。伪类/伪元素选择器
div:first-child //匹配全部div元素的第一个子元素
div:last-child //匹配全部div元素的最后一个子元素
a:link //未被点击的超链接
a:visited //已被点击的超链接
div:active //鼠标按下,尚未释放的div元素
a:hover //鼠标悬浮在上面的a元素
input:focus //获得当前焦点的input元素
div:lang(c) // lang属性等于c的div元素
p:first-line //匹配p元素的第一行
p:first-letter //屁屁p元素的第一个字母
div:before or div:after //在div元素的前面或后面插入生成的内容。//以下为css3中新增伪类
input:enabled //匹配激活的input元素。
input:disabled //匹配禁用的input元素。
input[type=”radio”]:checked //匹配选中的单选框radio。
input::selection //匹配选中的input元素。
div:nth-child(n) //匹配第n个元素,元素下标从1开始。
div:nth-last-child(n) //匹配倒数第n个元素,元素下标从1开始。
div:nth-of-type(n) //仅匹配第n个div元素。
div:nth-last-of-type(n) //仅匹配倒数第n个div元素。
:not(div) //匹配所有非div元素。
:target //突出显示点击过的超链接内容。
以上为常用的CSS选择器,大部分很好理解不难掌握,记住会用便可。
下面做几点说明:
- 其中nth-child(n) 和nth-of-type(n)容易混淆,下面进行实验说明:
图一
图二
图一与图二的对比,很清晰的解释了二者的区别:nth-child(n)会遍历dom结构中各个层级结构中的第n个元素,与元素类型无关。而nth-of-type(n)则会限制在选定的元素类型中,与类型有关。
实际项目中,使用nth-of-type(n)会相对安全一些。
- :before 和:after
图三
图三为一个用css实现的简单的类似微信中的聊天显示框。