html——标签选择器

交集选择器：标签+类（ID）选择器{属性：值；}。即要满足使用了某个标签，还要满足使用了类（id）选择器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div.box{
            color:#b6ff00;
        }
        p#miss{
            color:#ff6a00;
        }
    </style>
</head>
<body>
    <div class="box">哈哈</div>
    <p class="box">哈哈</p>
    <p id="miss">哈哈</p>
</body>
</html>

并集选择器：选择器+，+选择器+，选择器{属性:值;}。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box,p,strong{
            color:#ff6a00;
        }
    </style>
</head>
<body>
    <div class="box">哈哈</div>
    <p>哈哈</p>
    <strong>哈哈</strong>
</body>
</html>

后代选择器：选择器+空格+选择器{属性：值;}。后代选择器首选要满足包含（嵌套）关系。父集元素在前边，子集元素在后边。无限制隔代。只要能代表标签，标签、类选择器、ID选择器自由组合。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div .box p{
            color:#ffd800;
        }
    </style>
</head>
<body>
    <div>
        <div class="box">
            <p>哈哈</p>
        </div>
    </div>
</body>
</html>

子代选择器：选择器>选择器{属性:值;}。选中直接下一代元素，无法选中孙子代。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div>p{
            color:#ff6a00;
        }
    </style>
</head>
<body>
    <div>
        <p>哈哈哈</p>
    </div>
</body>
</html>
posted @ 2017-11-02 01:48  var_obj  阅读(1247)  评论(0)  编辑  收藏  举报