几个css3选择器
2,379 阅读
<style type="text/css" media="screen">
/*儿子选择器 ie7开始兼容 ie6不兼容*/
div>p{
color: red;
} /*div的儿子p 和后代选择器不同 儿子选择器只能选择div的下一级*/
/*序选择器* ie8开始兼容*/
ul li:frist-child{
color: blue;
} /*使用:first-child伪类时一定要保证前面没有兄弟节点*/
ul li:nth-child(3){
color: red;
} /*child后面可以函数 2n+2代表所有偶数项*/
ul li:last-child{
color: green；
} /*或者使用div等包裹住之后使用 目前这个是无效的*/
/*下一个兄弟选择器* ie7开始兼容*/
h3+p{
color: yellow;
} /*选择的是h3元素后面紧挨着的第一个元素*/
</style>
</head>
<body>
<div>
<p>颜色</p>
</div>
<ul>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ul>
<h3>我是标题</h3>
<p>我是段落</p>
<p>我是段落</p>
<h3>我是标题</h3>
<p>我是段落</p>
<p>我是段落</p>
<h3>我是标题</h3>
<p>我是段落</p>
<p>我是段落</p>
<h3>我是标题</h3>
<p>我是段落</p>
<p>我是段落</p>
</body>
