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,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
41 5
|
9月前
|
前端开发
css--css选择器,伪类
css--css选择器,伪类
|
9月前
|
前端开发
css中:nth-child()和nth-of-type有何区别详解
css中:nth-child()和nth-of-type有何区别详解
|
前端开发
CSS属性选择器和a元素伪类的基本用法
a伪类中,link和visited只能用于超链接,hover和active伪类可以用在所有标签。
112 0
CSS属性选择器和a元素伪类的基本用法
|
前端开发
CSS - List-style
CSS - List-style
71 0
CSS - List-style
|
前端开发 JavaScript 开发者
每个开发者都应该知道的 CSS 伪元素(Pseudo Element)
每个开发者都应该知道的 CSS 伪元素(Pseudo Element)
270 0
|
Web App开发 前端开发
CSS中的选择器之类选择器和id选择器
1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代选择器) 简单来说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.
849 0