first-child是css3中的控制器,意味着选择统计元素的第一个元素,但是今天在做网站的时候遇到first-child不起作用,于是就搜索了一下,找到了问题所在。
我们先看一个例子:
css代码:

1
2
3
4
<style>
.dm p:first-child { background:#09C;color:#fff}
.dm p:last-child { background:#09C;color:#fff}
</style>

html代码:

1
2
3
4
5
6
7
8
<div class="dm">
<span>第一行</span>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<span>最后一行</span>
</div>

如上代码运行之后,这里面的first-child与last-child没有起到任何的作用。
先不说原因,我们把html代码改一下:

1
2
3
4
5
6
7
8
<div class="dm">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>最后一行</p>
</div>

怎么样,这次起作用了吧。
看到这两个的区别了吗?
第一个例子里的第一个标签和最后一个标签都是span,而我们寻找的first-child和last-child都是P,[如果父元素的第一个元素或者最后一个元素不是寻找的标签的话,会不起作用],这样说着有点拗口,按上面的例子来说如果父元素.dm寻找的first-child与last-child是P,如果不是P的话会不起作用,大家需要注意这一点。

Sorry, the comment form is closed at this time.

   
© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha