网站地图    收藏   

主页 > 专题教程 > css >

:last-child

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。...

CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。

:last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素,例如:

<article>
  <p>
    第一个段落...
  </p>
  <p>
    第二个段落...
  </p>
</article>

如果使用下面的CSS规则来添加样式,那么第二个段落的文字大小将被修改:

p:last-child {
    font-size: 2em;
}

但是如果在容器中,<p>段落不是最后一个子元素,那么它不会被匹配,例如:

<article>
  <h1>标题</h1>
  <p>
    第一个段落...
  </p>
  <h2>
    标题2
  </h2>
</article>

如果还是使用上面的CSS规则,将没有<p>段落元素会被匹配。

在这种情况下,如果你想匹配段落元素,可以使用:lastt-of-type伪类选择器。正如其名字所示,:last-of-type伪类选择器匹配的是某种类型元素的最后一个元素。使用下面的代码将匹配H1标题之后的段落元素:

p:lastt-of-type {
    font-size: 2em;
}
示例代码

假如你有一段这样的HTML代码:

<article>
    <h1>这是一个标题元素</h1>
    <p>
        第一个段落,但不是父元素中的第一个元素。
    </p>
    <p>
        第二个段落。 <span>这是段落中的一个行内元素。</span>
    </p>
    <ul>
        <li>第一个无序列表项</li>
        <li>第二个无序列表项</li>
        <li>第三个无序列表项</li>
    </ul>
</article>

下面的代码会匹配第二个段落中的行内<span>元素。

span:last-child {
    color: red;
}  

下面的代码会匹配最后一个无序列表项。

li:last-child {
    text-decoration: underline;
    color: deepPink;
}

下面的代码不会匹配任何的p段落。

p:last-child {
    font-style: italic;
}

下面的代码通过和伪元素来为<span>元素添加内容。

span:last-child::before {
    content: "(";
    color: deepPink;
}

span:last-child::after {
    content: ")";
    color: deepPink;
}
在线演示

下面的例子是上面代码的实际效果。

    最新评论

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论