html5中文学习网

您的位置: 首页 > html5教程 > 入门教程 » 正文

HTML5新增的Css选择器、伪类介绍_html5教程技巧

[ ] 已经帮助:人解决问题
点评:HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
选择器 mJJHTML5中文学习网 - HTML5先行者学习网
p[name^=“my”]{font-size:14px} mJJHTML5中文学习网 - HTML5先行者学习网
选择器 ^= 讲规则应用到所有 name属性以“my”开头的<p>元素标签 mJJHTML5中文学习网 - HTML5先行者学习网
p[name$=“my”]{font-size:14px} mJJHTML5中文学习网 - HTML5先行者学习网
选择器 $= 讲规则应用到所有 name属性以“my”结尾的<p>元素标签 mJJHTML5中文学习网 - HTML5先行者学习网
p[name*=“my”]{font-size:14px} mJJHTML5中文学习网 - HTML5先行者学习网
选择器 $= 讲规则应用到所有 name属性包含“my”结尾的<p>元素上 mJJHTML5中文学习网 - HTML5先行者学习网
选择器 > 、 + 、~ mJJHTML5中文学习网 - HTML5先行者学习网
选择器>表示受影响的元素是第一个元素的子元素。 mJJHTML5中文学习网 - HTML5先行者学习网
选择器+这 个选择器引用紧跟元素之后的元素,这两个元素必须有相同父级。 mJJHTML5中文学习网 - HTML5先行者学习网
选择器~与+类似,但受影响的元素不一定紧跟第一个元素。mJJHTML5中文学习网 - HTML5先行者学习网
mJJHTML5中文学习网 - HTML5先行者学习网
伪类与引用元素名称之间要加“:” mJJHTML5中文学习网 - HTML5先行者学习网
例:myclass:nth-child(2) mJJHTML5中文学习网 - HTML5先行者学习网
myclass元素中的第二个素 mJJHTML5中文学习网 - HTML5先行者学习网
关键字“odd” ,“even” mJJHTML5中文学习网 - HTML5先行者学习网
myclass:nth-child(odd):影响其父元素索引位置为奇数的 mJJHTML5中文学习网 - HTML5先行者学习网
myclass:nth-child(even):影响其父元素索引位置为偶数的 mJJHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
mJJHTML5中文学习网 - HTML5先行者学习网
<style> mJJHTML5中文学习网 - HTML5先行者学习网
.test:nth-child(odd) mJJHTML5中文学习网 - HTML5先行者学习网
{ mJJHTML5中文学习网 - HTML5先行者学习网
color:Blue; mJJHTML5中文学习网 - HTML5先行者学习网
} mJJHTML5中文学习网 - HTML5先行者学习网
.test:nth-child(even) mJJHTML5中文学习网 - HTML5先行者学习网
{ mJJHTML5中文学习网 - HTML5先行者学习网
color: Red; mJJHTML5中文学习网 - HTML5先行者学习网
} mJJHTML5中文学习网 - HTML5先行者学习网
.test:nth-child(2) mJJHTML5中文学习网 - HTML5先行者学习网
{ mJJHTML5中文学习网 - HTML5先行者学习网
color: Green; mJJHTML5中文学习网 - HTML5先行者学习网
} mJJHTML5中文学习网 - HTML5先行者学习网
</style> mJJHTML5中文学习网 - HTML5先行者学习网
<div class="test"> mJJHTML5中文学习网 - HTML5先行者学习网
<p> mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
<p> mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
</div> mJJHTML5中文学习网 - HTML5先行者学习网
<p class="test"> mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
<p class="test"> mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
<p class="test"> mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
<p class="test"> mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
</p> mJJHTML5中文学习网 - HTML5先行者学习网
mJJHTML5中文学习网 - HTML5先行者学习网
效果如下: mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
1 mJJHTML5中文学习网 - HTML5先行者学习网
2 mJJHTML5中文学习网 - HTML5先行者学习网
否定伪类 mJJHTML5中文学习网 - HTML5先行者学习网
:not(p){color:red} mJJHTML5中文学习网 - HTML5先行者学习网
除了<p>元素之外的其他元素都为redmJJHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助