CSS1，CSS2选择器详解

时间：2017-03-01 20:49:10 阅读：254 评论：0 收藏：0 [点我收藏+]

标签：ima add mozilla yellow ext 标签 .com 规则 epp

第一、CSS1选择器：

　　1、元素选择器（也叫标签选择器，是最基本的选择器）

<style>
    html{background-color: red;}
    div{background-color: yellow;}
</style>

　　2、ID选择器（id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义）

<style>
    #boxl{color:blue;}
</style>

　　　　2.1、结合元素的ID选择器：

<style>
　　/*ID是box的div标签*/
    div#box{
        width: 100px;
        height: 100px;
        background: red;
        border: 3px solid black;
    }
</style>

<body>
    <div id="box"></div>    
</body>

　　　　注意：在实际开发中，浏览器并不会检测ID的唯一性，可以为相同元素的ID添加同一个样式。如下图:　　

　　技术分享

　　3、类选择器（类选择器可以为class相同的 HTML 元素们指定特定的样式。类选择器以 "." 来定义）

<style>
    .head{
        width: 100px;
        height: 100px;
        background: red;
    }
</style

　　　　3.1、结合元素的ID选择器：

<style>
    /*class是head的div标签*/
    div.head{
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<body>
    <div class="head"></div>    
</body>

　　　　注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

　　4、包含选择器（E F{}:选择所有被E元素包含的F元素）

<style>
    /*三种选择器可以打乱顺序任意组合*/
    body div{
        border: 3px solid #000000;
    }
    #outer #inner{
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    .body .head{
        width: 100px;
        height: 100px;
        background: deeppink;
    }
</style>

<body class="body" id="outer">
    <div id="inner"></div>    
    <div class="head"></div>        
</body>

　　代码执行如下图：

技术分享

　　5、分组选择器（E,F,G{}:选择所有被E元素和F元素以及G元素）

<style>

/*将要分组的选择器放在规则左边，并用逗号隔开。分组个数需要两个及以上*/

    div,p{        
        border: 3px solid #000000;
    }
    #box,#font{
        width: 100px;
        height: 100px;
        background: #66FFFF;
    }
    .div,.p{
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div  id="box" class="div"></div>    
    <p id="font" class="p"></p>        
</body>