一、基本选择器，有三种应用方式：

　　1、使用通配符 *

　　* 对所有标签进行渲染，包括body标签，优先级最低

　　2、使用id

　　id不能以数字开头，具有唯一性，不可重复

　　3、使用class

　　class不能以数字开通，但是不具有唯一性，可以重复

　　注意：

　　通配符的优先级低于标签，标签的优先级低于id或class；

　　当存在多层、同样优先级的选择器渲染时，按编辑的顺序，style中后面的优先级最高

二、组合选择器，基本选择器可组合使用

　　1、逗号隔开，表示关系：或

　　2、指定嵌套的后代时，使用空格，无论儿子还是孙子，都有效

　　3、指定嵌套的子代时，使用>，只有儿子变，孙子不变

　　4、指定毗邻标签时，使用A+B，只对A的兄弟标签B渲染

　　注意：p标签不能嵌套块标签，嵌套效果等于无

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise</title>
    <style>
        *{
            background-color:pink;
            color:green;
            font-size:10px;
        }
        <!--#second{-->
            <!--color:blue;-->
            <!--font-size:20px;-->
        <!--}-->
        <!--.cc{-->
            <!--color:yellow;-->
            <!--font-size:20px;-->
        <!--}-->
        <!--.tt{-->
            <!--color:yellow;-->
            <!--font-size:10px;-->
        <!--}-->
        <!--div.tt{-->
            <!--background-color:green;-->
            <!--color:yellow;-->
            <!--font-size:10px;-->
        <!--}-->
        <!--div,p{-->
            <!--color:black;-->
            <!--font-size:10px;-->
        <!--}-->
        <!--div div{-->
            <!--background-color:white;-->
            <!--color:blue;-->
        <!--}-->
        <!--div p{-->
            <!--color:red;-->
        <!--}-->
        <!--.tt a{-->
            <!--background-color:black;-->
            <!--color:white;-->
        <!--}-->
        <!--div>p{-->
            <!--color:red;-->
        <!--}-->
        <!--.tt>div{-->
            <!--background-color:black;-->
            <!--color:white;-->
        <!--}-->
        div+p{
            color:red;
        }
        a+p{
            color:yellow;
        }
        a+div{
            color:yellow;
        }
    </style>
</head>
<body>
    <p>以下练习的是基本选择器,多重渲染效果时：
        1：通配符的优先级低于其他;指定id或class的优先级最高
        2：按解释器的顺序，即style中出现的先后，以最后面的为优先级最高</p>
    <p>
        第一种方式green：通配符*，对所有标签进行渲染，包括body标签
    </p>

    <p id="second">
        第二种方式blue：通过id，id不能以数字开头，是唯一的
    </p>

    <p class="cc">
        第三种方式yellow：通过class，class与id一样，不能用数字开头
    </p>
    <a class="cc">
        class不是唯一的，可以重复
    </a>
    <p class="tt cc">
        同时存在多层渲染时，按上面编辑的顺序，后面的优先级最高
    </p>
    <div class="tt">
        同时存在多层渲染时，按上面编辑的顺序，后面的优先级最高
        <a>
            后代
            <div>
                tt-a-div
            </div>
        </a>
        <p>
            p标签不能嵌套块标签，嵌套效果等于无
            <div>
                tt-a-div
            </div>
        </p>
    </div>
    <p>
        以下练习的是组合选择器:
        1、逗号隔开，表示关系：或
        2、指定嵌套的后代时，使用空格，无论儿子还是孙子，都有效
        3、指定嵌套的子代时，使用>，只有儿子变，孙子不变
        4、指定毗邻标签时，使用A+B，只对A的兄弟标签B渲染
    </p>
    <div>
        第一层，有3个后代
        <div>后代1，还有两个后代
            <div>后代1.1div</div>
            <p>后代1.2p</p>
        </div>
        <div>
            后代2div
        </div>
        <p>
            后代3p
        </p>
    </div>
    <p>p标签不能嵌套块标签，嵌套效果等于无</p>

</body>
</html>
View Code

 三、属性选择器

　　标签内可自定义属性，并根据属性添加渲染效果。

　　1、直接使用[属性名]，对所有同属性的添加效果

　　2、标签名相同，但是值不同,使用[标签名="***"]的方式，指定作用域

　　3、标签名和自定义属性同时使用，表示作用效果在带有此属性的类标签下

　　4、自定义属性值由含有空格的字符串组成时，可使用[属性名~="***"]指定

　　5、若自定义属性值是由 - 连接的字符串、并以***开头，可使用[属性名|="***"]指定

　　6、[属性名^="***"]匹配以***开头的,无关后面是什么连接，应用范围广

　　7、[属性名$="***"]匹配以***结尾的

　　8、[属性名*="***"]匹配以***开头的

　　注意：使用before和after可在标签前后进行字段插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise2</title>
    <style>
        <!--[zidingyi]{-->
            <!--color:blue;-->
        <!--}-->

        <!--[zidingyi="dz"]{-->
            <!--color:blue;-->
        <!--}-->

        <!--p[zidingyi]{-->
            <!--color:red;-->
        <!--}-->

        <!--[zidingyi~="kk"]{-->
            <!--color:blue;-->
        <!--}-->

        <!--[zidingyi|="bp"]{-->
            <!--color:blue;-->
        <!--}-->

        <!--[zidingyi^="ueht"]{-->
            <!--color:blue;-->
        <!--}-->

        <!--[zidingyi|="ueht"]{-->
            <!--color:blue;-->
        <!--}-->

        <!--[zidingyi^="bp"]{-->
            <!--color:red;-->
        <!--}-->

        <!--[zidingyi$="htod"]{-->
            <!--color:red;-->
        <!--}-->

        <!--[zidingyi*="ewe"]{-->
            <!--color:yellow;-->
        <!--}-->

        #insert:before{
            content:"开始：";
            color:red;
        }
        #insert:after{
            content:"结束。";
            color:red;
        }


    </style>
</head>
<body>
    <p>以下练习属性选择器：</p>
    <div zidingyi="zd">
        标签内可自定义属性，并根据属性添加渲染效果:
        <p>1、直接使用[属性名]，对所有同属性的添加效果</p>
    </div>
    <div zidingyi="dz">
        <p>2、标签名相同，但是值不同,使用[标签名="***"]的方式，指定作用域</p>
    </div>
    <p zidingyi="bp">
        3、标签名和自定义属性同时使用，表示作用效果在带有此属性的类标签下
    </p>
    <p zidingyi="bp kk zd">
        4、自定义属性值由含有空格的字符串组成时，可使用[属性名~="***"]指定
    </p>
    <p zidingyi="bp-kk-zd">
        5、若自定义属性值是由 - 连接的字符串、并以***开头，可使用[属性名|="***"]指定
    </p>
    <p zidingyi="uehtiohtoieqr">
        6、[属性名^="***"]匹配以***开头的,无关后面是什么连接，应用范围广
    </p>
    <p zidingyi="uehtiohtod">
        7、[属性名$="***"]匹配以***结尾的
    </p>
    <p zidingyi="trewerw">
        8、[属性名*="***"]匹配以***开头的
    </p>
    <p id="insert">
        9、使用before和after可在标签前后进行字段插入
    </p>

</body>
</html>
View Code

四、伪类选择器

 　　伪类选择器，对同一内容进行操作，不同操作显示不同效果，注意顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise3</title>
    <style>
        a:link{
            color:red;
        }

        a:visited{
            color:blue;
        }

        a:hover{
            color:green;
        }

        a:active{
            color:yellow;
        }


    </style>
</head>
<body>
    <a href="helloWeb.py">伪类选择器，定义连接点击时与点击前后的显示效果</a>
    <a>注意设置伪类选择器时的顺序，一定按照实际操作的顺序，否则会出错</a>

</body>
</html>
View Code