CSS3 :nth-of-type() 选择器

简介:

可以设定第几个元素的样式

案例
css

.qrcode img {
    margin-top: 30px;
}

.qrcode p:nth-of-type(1) { /*第一个p*/
    font-size: 16px;
    color: #b03305;
}

.qrcode p:nth-of-type(2) { /*第二个p*/
    font-size: 14px;
    color: #777;
}

html

<div class="qrcode" id="qrcDiv">
    <img src="{sh:$publicnumber_info['qrcode']}" width="250px" height="250px">
    <p>长按二维码图片,识别图中二维码 关注</p>
    <p>关注我们,获取更多服务</p>
</div>

效果
422101-20160402115754660-407898405.png



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5347318.html,如需转载请自行联系原作者

相关文章
|
18小时前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
18小时前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
18小时前
|
前端开发
CSS选择器
CSS选择器
12 1
|
18小时前
|
前端开发 开发者
【专栏:CSS基础篇】CSS选择器详解:精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性,详细阐述了基础选择器(元素、类、ID、属性和伪类/伪元素)及复杂选择器(后代、子元素、相邻兄弟和一般兄弟)的用法。通过理解并巧妙运用这些选择器,开发者能更高效地控制页面样式,提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能,助力创建优雅且强大的样式表,实现精准的网页设计。
|
18小时前
|
前端开发 容器
【Web 前端】css选择器有哪些?
【4月更文挑战第22天】【Web 前端】css选择器有哪些?
|
18小时前
|
前端开发
css的选择器,优先级和示例
css的选择器,优先级和示例
9 1
|
18小时前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
22 1
|
18小时前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
36 1
|
18小时前
|
前端开发 UED
css选择器有哪些
【4月更文挑战第15天】css选择器有哪些
19 3
|
18小时前
|
前端开发 UED
css选择器是什么
【4月更文挑战第15天】css选择器是什么
19 6

热门文章

最新文章