css选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    /*后代选择器*/
    /*div span{*/
    /*    color: aqua;*/
    /*}*/


    /*子选择器*/
    /*div>span{*/
    /*    color: red;*/
    /*}*/


    /*毗邻选择器*/
    /*div+span{*/
    /*    color: blue;*/
    /*}*/

    /*兄弟选择器*/
    /*div~span{*/
    /*    color:chartreuse;*/
    /*}*/


        /*1.具有某个属性名
        2.具有某个属性名及属性值
        3.具有某个属性名及属性值某个标签
        */
        /*找只要有hobby这个属性名的所有标签*/

    /*属性选择器1*/
    /*[hobby='xxx']{*/
    /*    color: chartreuse;*/
    /*}*/

    /*属性选择器2*/
    /*[hobby]{*/
    /*    color: red;*/
    /*}*/

    /*分组嵌套选择器*/
    /*div,span,p{*/
    /*    color: blue;*/
    /*}*/


    /*伪类选择器*/

    /*链接未点击时的颜色*/
    /*a:link{*/
    /*    color: chartreuse;*/
    /*}*/

    /*!*鼠标悬浮在链接上时的颜色 *!*/
    /*a:hover{*/
    /*    color: red;*/
    /*}*/

    /*!*鼠标点击链接时的颜色 *!*/
    /*a:active{*/
    /*    color: aqua;*/
    /*}*/

    /*!*鼠标点过链接后的颜色*!*/
    /*a:visited{*/
    /*    color: brown;*/
    /*}*/


    /*!*鼠标选中文本框时的颜色 *!*/
    /*input:focus{*/
    /*    background: red;*/
    /*}*/

    /*!*鼠标悬浮在文本框上时的颜色*!*/
    /*input:hover{*/
    /*    background: aqua;*/
    /*}*/

    /*改变所有p标签内内容中第一个字符的样式*/
    /*p:first-letter{*/
    /*    color: red;*/
    /*}*/


    /*在所有p标签内内容的前面加入一个符号*/
    /*p:before{*/
    /*    content: '$';*/
    /*}*/




        /*
        1.选择器相同的情况下:就近原则
        2.选择器不同的情况下:

        精度越高,优先级越高


        行内  > id选择器 > 类选择器  > 标签选择器
    */

    </style>
    
    


</head>
<body>
<span>div上面第一个span</span>
<span>div上面第二个span</span>
<div >div
    <span>div里面的第一个span</span>
    <p>div里面的第一个p
        <span hobby="xxx">div里面的第一个p里面的span</span>
    </p>
    <span>div里面最后一个span</span>
</div>
<span hobby="xxx">div下面的第一个span</span>
<span hobby="123">div下面的第二个span</span>
<span>div下面的第三个span</span>

<a href="http://www.baidu.com">伪类选择器测试</a>

<input type="text">

<p>100</p>
<p>1000</p>
<p>10000</p>


</body>
</html>

 

posted @ 2019-09-04 15:27  去遇见最好的自己  阅读(170)  评论(0)    收藏  举报