网站地图    收藏   

主页 > 专题教程 > css >

:last-of-type

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

[导读] CSS :last-of-type伪类选择器用于匹配属于其父元素的特定类型的最后一个子元素的每个元素。...

CSS :last-of-type伪类选择器用于匹配属于其父元素的特定类型的最后一个子元素的每个元素。

换句话来说,:last-of-type伪类选择器匹配父元素中最后一次出现的某类子元素,例如:

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

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

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

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

<div class="container">
    <h1>标题</h1>
    <nav>
        <ul>
            <li>列表项一</li>
            <li>列表项二</li>
            <li>列表项三</li>
            <li>列表项四</li>
        </ul>
    </nav>
    <article>
        <h2>标题</h2>
        <p>
            段落内容... <a href="#">超链接1</a>... <a href="#">超链接2</a>
        </p>
        <p>
            段落内容...
        </p>
    </article>

    <article>
        <h2>标题</h2>
        <p>
            段落内容...
        </p>
        <p>
            段落内容...
        </p>
    </article>
</div>

下面的代码会匹配.container容器中的最后一个article元素。

article:last-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}

下面的代码会匹配所有article元素的最后一个p段落。

p:last-of-type {
    font-weight: bold;
}

下面的代码通过伪元素来为最后一个超链接元素设置样式。

a:last-of-type {
    color: deepPink;
}

a:last-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}
在线演示

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

标题

...

最后一个段落内容被设置为粗体字...

    最新评论

    添加评论

    更多文章推荐

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

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

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

    添加评论