CSS选择器 

<html>
<head>
    <title>CSS的选择器</title>
    <style type="text/css">
    /*
    CSS的选择器一般使用下面的这种格式
    选择符{
    属性1:值;
    属性2:值;
    }
    */
    /*例1,匹配<p>元素*/
    p{
        font-size:20px;/*设置文字字号*/
    }
    /*例2,类选择器,匹配class为"apple1"的元素*/
    .apple1{
        color:red;/*设置文字颜色*/
    }
    .apple2{
        font-size:50px;
    }
    /*例3,ID选择器,匹配id为"potato"的元素*/
    #potato{
        font-size:15px;
    }
    /*例4,子选择器,用>符号,匹配first第一代后代生效,第二代之后不生效*/
    span{
        color:red; /*给span一个默认的样式*/
    }
    .first>span{
        color:blue; /*只有first类的第一代span才有的蓝色样式*/
    }
    /*例5,包含选择器,用空格符号,匹配"second"类下的所有"span"元素*/
    .second span{
        border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
    }
    /*例6,通用选择器,匹配html中的所有标签元素*/
    *{
        color:green;/*绿色*/
    }
    /*例7,伪类选择符,用:符号,如在超链接鼠标滑过时改变css样式*/
    a:hover{
        color:pink;
        font-size:30px;
    }
    /*例8,分组选择符,用逗号,匹配".firstDiv"类,"secondDiv"元素*/
    .firstDiv,.secondDiv{
        color:purple;
    }
    </style>
</head>
<body>
    <p>匹配到(例1)</p>
    <p class="apple1">匹配到(例2)</p>
    <span class="apple1 apple2">类选择器词列表方法(例2)</span>
    <p id="potato">匹配到(例3)</p>
    <p class="first">
        <span>蓝一代(例4)
            <span>红二代(例4)
            </span>
        </span>
    </p>
    <p class="second">
        <span>第一代(例5)
            <span>第二代(例5)
            </span>
        </span>
    </p>
    <a href="http:www.baidu.com">百度(例7)</a>
    <div class="firstDiv">分组匹配,firstDiv类(例8)</div>
    <div class="secondDiv">分组匹配,secondDiv类(例8)</div>
</body>
</html>
posted @ 2015-12-05 22:27  谢谢侬L  阅读(130)  评论(0)    收藏  举报