选择某个元素的第一个子元素<:first-child>
:first-child是用来选择某个元素的第一个子元素,比如我们这里的这个demo,你想让列表中的"1"具有与从不同的样式,按照之前的写法,我们需在要第一个li上加上一个相应的class名,比如说“first”,然后我们在给予对应的样式,如下:
.wrap li.first {background: green; border: 1px dashed blue;}
在CSS3最新选择器出现之后,我们就可以使用:first-child来实现,就不需要在增加一个额外的class名了,设置如下:
.wrap li:first-child {background: green; border: 1px dashed blue;}
两种方法最终效果是一样的,只是后者对我来说在操作上会更显得简单、方便、快捷。
请亲自把右侧的第一个背景变为红色,边框为1像素、蓝色、虚线。