几个css3选择器

几个css3选择器

标签：#css3选择器# 时间：2018/10/05 21:02:26 作者：Shino

    <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>

相关博客

最热博客