css3 - css中如何让第一个和最后一个不被选中?

html-css08

css3 - css中如何让第一个和最后一个不被选中?,第1张

方法很多种，例如通过伪类：last-child{ 样式 }这个是选择最后一个父级子元素。

第一个父级子元素可以这样nth-child(1){ 样式 }

除了上面的方法还可以通过给第一和最后一个元素设置一个额外的类来设置样式。

首先要更正一下，不存在first-of-child的，只有first-of-type

下面就说说

first-child

与first-of-type的区别：

first-child：父元素的第一个子元素且必须符合指定类型

first-of-type：父元素的符合指定类型的第一个子元素

当然，光看文字也是很难理解的，下面看看例子：

第1行

第2行

第3行

这种情况下，不管是p:first-of-type还是p:first-child，

第1行

都会被选中。

而如果是：

第1行

第2行

第3行

第4行

则p:first-of-type的话，

第2行

会被选中；

而p:first-child的话，将没有任何元素被选中！