【20161205】:first-child和:last-child学习笔记 #55
Comments
|
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>
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>
|
|
ntn-child的例子写错了，参见w3school |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
时间：2016-12-05 16:21:52
原文摘自：http://www.111cn.net/cssdiv/css/54387.htm
首先介绍下:first-child伪类，即选择第一个对象。
例如：
出现问题
如果在下面加上一行：
那么.loop:last-child就会失效，不会作用于任何div。同理，如果在前面加上一个div，那么.loop:first-child也会失效。
解决办法
使用一个div将所有.loop包裹，即：
那么.loop:last-child就有效了，同理.loop:first-child。
补充
根据结构不同，在部分情况下可能只会出现:last-child失效。总之只要两个中一个出了问题，就极可能是使用此样式的层没有被整个包裹起来。
The text was updated successfully, but these errors were encountered: