来源:自学PHP网 时间:2018-02-08 10:48 作者: 阅读:84次
[导读] CSS :last-of-type伪类选择器用于匹配属于其父元素的特定类型的最后一个子元素的每个元素。...
CSS 换句话来说, <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> 下面的代码会匹配 article:last-of-type { background-color: #eee; border: 1px solid #ddd; } 下面的代码会匹配所有 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