zhongxia245/blog

【20161205】:first-child和:last-child学习笔记

zhongxia245 opened this issue · 3 comments

时间:2016-12-05 16:21:52
原文摘自:http://www.111cn.net/cssdiv/css/54387.htm


刚在折腾主题的时候发现的一个小问题,我很好奇。

首先介绍下:first-child伪类,即选择第一个对象。
例如:

<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div> 

在css中可以使用.loop:first-child给第一个层单独定义样式。同理,可以使用.loop:last-child给最后一个层单独定义。

出现问题

如果在下面加上一行:

<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div class="loop">测试测试测试测试测试测试测试测试测试</div>
<div>我是没有样式来捣乱的</div> 

那么.loop:last-child就会失效,不会作用于任何div。同理,如果在前面加上一个div,那么.loop:first-child也会失效。
解决办法
使用一个div将所有.loop包裹,即:

<div>
 <div class="loop">测试测试测试测试测试测试测试测试测试</div>
 <div class="loop">测试测试测试测试测试测试测试测试测试</div>
 <div class="loop">测试测试测试测试测试测试测试测试测试</div>
</div>
<div>我是没有样式来捣乱的</div> 

那么.loop:last-child就有效了,同理.loop:first-child。

补充

根据结构不同,在部分情况下可能只会出现:last-child失效。总之只要两个中一个出了问题,就极可能是使用此样式的层没有被整个包裹起来。

lgy87 commented

nth-of-type

nth-of-type 和 ntn-child 的区别

nth-of-type 跟标签类型有关, nth-child 的第几个 跟标签类型无关。

1. ntn-of-type

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>   <!-变成红色->
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

nth-of-type 的作用: 规定属于其父元素的第二个 p 元素

2. ntn-child

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(1)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>  <!--这个变红-->
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

该选择器选取父元素的第 N 个子元素,与类型无关。

ntn-child的例子写错了,参见w3school