欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5新增的Css选择器、伪类先容

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

选择器
p[name^=“my”]{font-size:14px}
选择器 ^= 讲法则应用到全部 name属性以“my”开头的<p>元素标签
p[name$=“my”]{font-size:14px}
选择器 $= 讲法则应用到全部 name属性以“my”末了的<p>元素标签
p[name*=“my”]{font-size:14px}
选择器 $= 讲法则应用到全部 name属性包括“my”末了的<p>元素上
选择器 > 、 + 、~
选择器>暗示受影响的元素是第一个元素的子元素。
选择器+这 个选择器引用紧跟元素之后的元素,这两个元素必需有沟通父级。
选择器~与+相同,但受影响的元素不必然紧跟第一个元素。

伪类与引用元素名称之间要加“:”
例:myclass:nth-child(2)
myclass元素中的第二个素
要害字“odd” ,“even”
myclass:nth-child(odd):影响其父元素索引位置为奇数的
myclass:nth-child(even):影响其父元素索引位置为偶数的


代码如下:
<style>
.test:nth-child(odd)
{
color:Blue;
}
.test:nth-child(even)
{
color: Red;
}
.test:nth-child(2)
{
color: Green;
}
</style>
<div class="test">
<p>
1
</p>
<p>
2
</p>
</div>
<p class="test">
1
</p>
<p class="test">
2
</p>
<p class="test">
1
</p>
<p class="test">
2
</p>

结果如下:
1
2
1
2
1
2
否认伪类
:not(p){color:red}
除了<p>元素之外的其他元素都为red 本文地址:http://itbyc.com/web/html5/13071.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1