今天开发的时候,发现last-child不起作用,看了下原因顺便给自己学习CSS选择器,我们这里举个例子,如下代码:
<div>
<h1>title</h1> <p>words</p>
<p>words</p>
<p>words</p>
</div>
当我们想获取第一个p标签并给它加粗时,如果采用以下写法:
div p:first-last{font-weight:blod}
这时候我们会发现不起作用。这时候我们应该采用
div p:first-of-type{font-weight:blod}
这时候调试下就没问题了。
这里我们要理解下:first-child和:first-of-type 区别:
:first-child 指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来;
:first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。
以此类推,选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也是同样道理的。