点评: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>元素之外的其他元素都为red
mJJHTML5中文学习网 - HTML5先行者学习网