2、选择器与优先级

1、选择器优先级： 行间选择器>ID选择器>类选择器>标签选择器

2、选择器书写规范：

行间选择器：

<div style="width: 100px; height: 100px; background: yellow;"></div>

ID选择器：

<style>
    #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
</style>

一般写在style标签中，以#+ID名称{}的格式进行书写，ID是当前页面唯一的。

类选择器：

<style>
    .div1{
        width: 100px;
        height: 100px;
        }
    .bgc{
        background-color: pink;
        }
</style>

类选择器可以是多个class加在同一个元素上以.+class名称{}的格式进行书写。

标签选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
    </body>
</html>

适用于当前页面上所有标签为XXX的元素。以标签名{}的格式进行书写。

群组选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div, p, h1{
                width: 100px;
                height: 100px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <p>2</p>
        <h1>3</h1>
    </body>
</html>

用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段。

包含选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .div1 div{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <p>这是一个p标签</p>
            <div>div</div>
        </div>
    </body>
</html>

目标父级元素+空格+目标元素空格  空格代表=下一级(语法)

通配符：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body *{
                height: 50px;
                margin: 10px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div>
            div
            <p>div>p</p>
        </div>
        <h1>h1</h1>
        <p>p</p>
    </body>
</html>

* 通配符找到页面上符合规则的所有元素。一般不建议使用。

posted @ 2017-03-29 22:11  十丈红尘  阅读(230)  评论(0)  编辑  收藏  举报