css基本使用--css选择器

css选择器

1.标签选择器+class选择器+id选择器

<head>
    <meta charset="UTF-8">
    <title>css的选择器</title>
    <style>
        /*基本选择器之标签选择器*/
        p{
            color:red;
        }
        /*基本选择器之class选择器*/
        .test1{
            font-size: 100px;
        }
        /*基本选择器之id选择器*/
        #test2{
            font-family: "Adobe 宋体 Std L";
        }
    </style>
</head>
<body>
    <!--基本选择器：标签选择器，class选择器，id选择器-->
    <p>我就是我</p>
    <p class="test1">我就是我</p>
    <p id="test2">我就是我</p>
</body>

2.后代选择器+子代选择器

<head>
    <meta charset="UTF-8">
    <title>后代选择器和子代选择器</title>
    <style>
        /*子代选择器*/
        .box1>span{
            color:deepskyblue;
        }

        /*后代选择器:代表div后面所有的span标签*/
        .box1 span{
            font-size:40px;
        }

    </style>

</head>
<body>
    <!--后代选择器和子代选择器-->
    <div class="box1">
        <span>鹅鹅鹅</span>
        <p>曲<span>项</span>向天歌</p>
    </div>

</body>

3. 兄弟选择器+相邻选择器

<head>
    <meta charset="UTF-8">
    <title>兄弟选择器和相邻选择器</title>
    <style>
        /*兄弟选择器*/
        /*兄弟选择器只能选择到对象后面的标签*/
        .box2~p {
            color: blue;
        }

        /*相邻选择器*/
        /*作用于紧挨着对象的标签*/
        .box2+p{
            font-size: 100px;
        }

    </style>
</head>
<body>

    <!--相对于div标签，第一个p标签好比它的哥哥，后面的两个p标签好比弟弟-->
    <p>我就是我，不一样的烟火</p>
    <div class="box2"></div>
    <p>白毛浮绿水</p>
    <p>红掌拨清波</p>
</body>

4. 其他选择器

<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <style>
        /*全选择器*/
        *{
            font-family:华文彩云；
        }


        /*属性选择器*/
        /*一般用在非class和id属性，当我们属性不够用了，我们自己自定义属性，同样操作标签*/
        div[hh="test4"]{
            font-family:Simplex;
        }
        div[class="test3"]{
            color:peru;

        }

        /*分组选择器*/
        /*.box5{*/
            /*height:200px;*/
            /*width:200px;*/
            /*background:royalblue ;*/
        /*}*/
         /*.box6{*/
            /*height:200px;*/
            /*width:200px;*/
            /*background:royalblue ;*/
        /*}*/
        .box5.box6{
            height:200px;
            width:200px;
            background:royalblue ;
        }

    </style>
</head>
<body>
    <!--全选择器-->
    <p>我就是我</p>
    <span>我就是我</span>
    <div>我就是我</div>
    <h1>我就是我</h1>


    <!--属性选择器-->
    <div class="test3" hh="test4"></div>

    <!--分组选择器   分组选择器当我们有多个标签且有同一个样式的时候，可以使用-->
    <!--这样减少了代码的冗余-->
    <div class="box5"></div>
    <p class="box6"></p>
</body>

5.伪类选择器

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*未访问link  标签名：link   */
        a:link{
            color:deepskyblue;
        }

        /*当鼠标划过标签或者标签的区域内显现出来的样式*/
        a:hover{
            color:red;
        }

        /*访问后的*/
        a:visited{
            color:seashell;
        }

        /*激活的*/
        a:visited{
            font-size:60px;
            color:yellow;
        }

        div{
            height:200px;
            width:200px;
            background:steelblue;
        }
        div:hover{
            color:gray;
        }
    </style>
</head>
<body>
    <a href="">我是一个a标签</a>
    <div>我是div标签</div>
</body>

css基本使用--css选择器

猜你喜欢