CSS常用选择器的认识

---恢复内容开始---

前言：在CSS中选择器的种类有很多很多，但是在实际的工作中，我们经常会用到的分为两大类：基础选择器和复合选择器这两个大类，学习选择器的目的就是为了在复杂的页面中能够快速定位到你需要添加的层叠样式，好了，下面我们开始进入选择器的学习吧。

（一）基础选择器

　　1、标签选择器（元素选择器）

　　　　　　什么是标签选择器：是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

　　　　　　作用：标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p {

            }

    </style>

</head>

<body>

        <p>我是一个段落</p>

</body>

</html>

　　2、类选择器（可以建议多用）

　　　　每一个标签都会有class 属性；

　　　　用.（英文状态的点来选择）

　　　　用法代码如下：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .box {

         color:12px;

     }

     </style>

 </head>

 <body>

     <div class="box"></div>

 </body>

 </html>

　　！注意类选择器可以重复的使用

　　2、多类名选择器

　　　　目的：为了节省代码的长度；如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box {

        color:12px;

    }

        .boy{

            font-weight: 50px;

        }

    </style>

</head>

<body>

    <div class="box boy"></div>

</body>

</html>

　　　　！注意：多类名选择器是类选择器延伸出来的知识点，这样做有利于减少代码量，同时增加代码的重用性能；

　　3、id选择器（建议少用在CSS中）

　　　　实行的方法：和class基本的方法相同；

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box {

            font-weight: 700;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

　　　　！注意这个选择器只能是唯一的，不能重名。

　　4、*通配选择器

　　　　一般多用于清除浏览器的边距用的，但是由于*会拖慢页面的加载速度，因此我们也是比较少用的。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

      * {

            margin:0;

}

</head>

<body>

    <div id="box"></div>

</body>

</html>

（二）复合选择器

　　1、后代选择器

　　　　之前的学习中，我们已经认识了什么是父子关系的结构，这个选择器是通过后代选择的方法找到想要加层叠样式的标签，这里的后代是指儿子和孙子一直的下一代。使用的格式是：父亲级标签+（空格）+儿子级标签。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .box span {

             color: red;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <span></span>

     </div>

 </body>

 </html>

　　2、子元素选择器

　　　　是指：子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格。只能选择到子代这个标签元素其余的元素是不会影响的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box>span {

            color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        <span>

            我是儿子代

            <span>我是孙子代</span>

        </span>

    </div>

</body>

</html>

　　3、交集选择器

　　　　是指同时满足两个或者两个以上的标签才可以设置这个标签元素的层叠样式。通常的格式是div.class或者div#id等。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div.box {

            line-height: 30px;

        }

    </style>

</head>

<body>

    <div class="box" id="box1">

        <span>

            我是儿子代

            <span>我是孙子代</span>

        </span>

    </div>

</body>

</html>

　　4、并集选择器

　　　　是指同时给多个标签设置相同的样式，和class方法有一点类似，但是表现的形式不同，比较常用的标签。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div,span,p {

            margin: 0;

        }

    </style>

</head>

<body>

    <div class="box" id="box1">

        <span>

            我是儿子代

            <span>我是孙子代</span>

        </span>

        <p>我是老二</p>

    </div>

</body>

</html>

小结：基础选择器和复合选择器在项目开发中是比较常用的，但是会有一个问题，复合选择器在一些用习惯了空格的程序员的书写中会出现不自觉的敲了空格键或者是由于别的原因输入，此时最容易与后代选择器混淆，一般情况下如果一个选择器在开始执行的时候如果遇到空格它会默认去除掉，因为这个选择器还没有结束，因此不会开始一个新的选择器，因此为了让代码可读性更高，要符合选择器的使用规则。

（三）链接伪类选择器（是重点的内容）

　　1、选择器：link的格式,(链接的正常状态下)

　　　　这里的选择器我们可以用我们之前学习过的不单单只限定用a这个标签，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        a:link {

            background-color: #f00;

        }

        span a:link {

            background-color: #00f;

        }

    </style>

</head>

<body>

    <div class="box" id="box1">

        <span>

            我是儿子代

            <a href="#">111</a>

            <span>我是孙子代</span>

        </span>

        <p>我是老二</p>

    </div>

</body>

</html>

　　2、选择器：visited的格式（链接被访问过的状态下）

　　　　　　这个选择器同上也是一样的使用方法就不一一讲诉了。

    <style>

        a:visited {

            background-color: #f00;

        }

        span a:link {

            background-color: #00f;

        }

    </style>

　　3、选择器：hover的格式是鼠标经过时候的样式。

    <style>

        a:hover {

            background-color: #f00;

        }

        span a:link {

            background-color: #00f;

        }

    </style>

　　4、选择器：active的格式是指鼠标按下但是不松手时候显示的格式。

    <style>

        a:active {

            background-color: #f00;

        }

        span a:link {

            background-color: #00f;

        }

    </style>

　　！注意

写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。
记忆法可以是 love hate 爱上了讨厌或者 lv 包包非常 hao
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover

结论：选择器在CSS是比较常见，为了更加精确的选择到我们需要的标签，我们还应该通过W3C手册查看更多的选择器的样式，遇到问题要及时反思同时也要不断思考为什么要这样做，这样做的好处是什么？

---恢复内容结束---