第一章：第四课 选择器-兄弟元素选择器

关于选择器的部分，最后要介绍的一个选择器是通用兄弟选择器，他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下所示：
Element ~ 兄弟元素

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-兄弟元素选择器 | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        body{margin-bottom:20px; font-size:14px; font-family:"Microsoft Yahei";}
            p{height:30px; line-height:30px;}
                div ~ span{display:block; margin-bottom:5px; height:22px; line-height:22px; color:#fff; background:#900;}
        </style>
    </head>
    
    <body>
        <span>此span为div之前的兄弟元素</span>
        <span>此span为div之前兄弟元素</span>
        <div>
            前端开发网(W3Cfuns.com)!
            <p>W3CSchool，web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</p>
            <span>此span为div的子元素</span>
            <p>CSS3每日一练之选择器-状态伪类选择器[五] | 前端开发网(W3Cfuns.com)!</p>
            <span>此span为div的子元素</span>
        </div>
        <span>此span为div之后的兄弟元素</span>
        <span>此span为div之后的兄弟元素</span>
        <span>此span为div之后的兄弟元素</span>
    </body>
</html>



posted @ 2012-03-03 14:40  YouDoce  阅读(186)  评论(0)    收藏  举报