css选择器

一、选择器

选择器是我们用来准确定位标签，并对选中的标签进行样式改修。

二、常用选择器

1.基本选择器（id选择器，class选择器，标签选择器）；

2.后代选择器和子代选择器；

3.兄弟选择器和相邻选择器；

4.全选择器，属性选择器和分组选择器；

5.伪类选择器

三、选择器

1.基本选择器

class选择器：通过标签的 class 属性，选择对应的元素借助了一个类的概念，一处定义，可以多处使用；

id选择器：通过标签的 id 属性，选择对应的元素，id选择器具有唯一性；

标签选择器：通过标签来选择对应的元素；

例如：

<!DOCTYPE html>
<html lang="en">
<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>
</html>

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

<div class="box1">
        <span>鹅鹅鹅</span>
        <p>曲<span>项</span>向天歌</p>
    </div>

div下面的span标签和p标签都是div标签的后代标签，p标签内的span标签是p的子代标签，p标签与和p标签同级的span标签都是div标签的子代标签

<!DOCTYPE html>
<html lang="en">
<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>
</html>

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

<body>

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

div标签和几个p标签为同级标签，他们就好像兄弟

<!DOCTYPE html>
<html lang="en">
<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>
</html>

4.全选择器，属性选择器和分组选择器

<!DOCTYPE html>
<html lang="en">
<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;*/
            /*200px;*/
            /*background:royalblue ;*/
        /*}*/
         /*.box6{*/
            /*height:200px;*/
            /*200px;*/
            /*background:royalblue ;*/
        /*}*/
        .box5.box6{
            height:200px;
            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>
</html>

5.伪类选择器

未访问的样式：link；访问过后的样式：visited；

划过的样式：hover; 激活的样式：active;

<!DOCTYPE html>
<html lang="en">
<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;
            200px;
            background:steelblue;
        }
        div:hover{
            color:gray;
        }
    </style>
</head>
<body>
    <a href="">我是一个a标签</a>
    <div>我是div标签</div>
</body>
</html>