什么是选择器

每一条css样式声明由两部分组成：

选择器{
    样式;
}

选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

有哪几种选择器

标签选择器

标签选择器其实就是html代码中的标签：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。em并不等于固定的px，1em表示父级元素的字体大小。各浏览器默认情况下==1em=16px==。

类选择器

通过 .类名{}设置元素样式：

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        .dv{
            color: black;
        }
    </style>
</head>
<body>
    <div class="dv">
        我是一个div
    </div>
</body>

1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）

ID选择器

通过 #ID名{}设置元素样式：

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        #dv{
            color: black;
        }
    </style>
</head>
<body>
    <div id="dv">
        我是一个div
    </div>
</body>

1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
3、id属性的值既为当前标签的id，尽量见名思意，语义化

类和ID选择器的区别

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
</style>
</head>
<body>
     <p class="stress bigsize">使用类选择器样式设置成功</p>
     <p id="stressid bigsizeid">使用ID选择器样式设置失败</p> 
</body>

子选择器

>用于选择指定标签元素的第一代子元素：

<style type="text/css">
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">类名为first下的
    <span>标签被设置红色边框样式</span>
这里不会有特殊样式</p>
</body>

后代选择器

语法糖为空格，用于选择指定标签元素下的后辈元素：

<style type="text/css">
    .food li{
        border:1px solid red;
    }
</style>
</head>
<body>
    <ul class="food">
        <li>川菜
            <ul>
                <li>水煮肉片</li>
                <li>夫妻肺片</li>
            </ul>
        </li>
        <li>新疆菜
            <ul>
                <li>大盘鸡</li>
                <li>烤全羊</li>
            </ul>
        </li>
    </ul>
</body>

后代选择器与子选择器的区别

子选择器（child selector）仅是指它的直接后代，作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素（上述栗子中所有的li标签包裹的菜都会被单独设置指定样式）
后代选择器通过空格来进行选择，而子选择器是通过>进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器

通用选择器是功能最强大的选择器，它使用一个*号指定，作用是匹配html中所有标签元素，下面代码将html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择器

伪类选择符允许通过:hover给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

上述css代码表示a 标签中元素鼠标滑过的状态为字体颜色变红。
不要被伪类选择器名字给骗了，它并不是只能作用于类标签上。相反，:hover 可以放在任意的标签上，比如说 p:hover。
但是它们的兼容性很不好，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了，所以现在比较常用的还是 a:hover 的组合。

分组选择器

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符,，如下代码为h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

选择器的优先级

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        .dv{
            color: black;
        }
        #div{
            color: orange;
        }
        div{
            color: blue;
        }
        *{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="div" class="dv" style="color: red">
        我是一个div，用来测试不同选择器的优先级
    </div>
</body>

1、如果一个元素使用了多个选择器，则会按照选择器的优先级来给定样式
2、结合上述实栗，可以看出选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

当涉及样式的继承

    <style>
        .main{
            color:blue
        }
        span{
            color:green
        }
    </style>
    <div style="color:red !important" class=""main"">
        <span>123</span>
    </div>

此时span标签包裹的123显示绿色，！important>内联样式>id选择器>类选择器>标签选择器>通配符选择器>继承。

对于span有两种种影响样式的方式，
(1)继承自父div的color
而对于color而言，它受到类选择器和一个内联样式的影响，并且在这个内联样式中又有一个!important，最为最高级影响 (!important>内联>类选择器)，这就使得div的颜色为red，而作为其子元素的span也应该继承自父元素的color
(2)标签选择器span
但比较这两种影响，（1）作为样式继承的优先级为0,（2）作为标签选择器的优先级为1，所以（2）的优先级以微弱优势高于（1），所以最终采用标签选择器定义的green

权值的计算

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？下面我们一起来看一下代码：

p{color:red;}
.first{color:green;}
<p class="first">测试文本</p>

p和.first都匹配到了p这个标签上，但是为什么显示绿色呢？因为浏览器是根据权值高低来判断优先使用哪种css样式的。
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

特殊情况

在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值。这时候我们可以使用!important来解决。

p{color:red!important;} /*权值为1*/
.first{color:green;}   /*权值为10*/
<p class="first">无言独上西楼，月如钩</p>  /*文本被设置成红色*/

!important要写在分号的前面
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时样式优先级为：==浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式==，但是!important优先级样式是个例外，权值高于用户自己设置的样式
总结：!important拥有最高权值，于是开始为所欲为

===================================================================
都看到这了，点个赞再走吧，相信会给你带来好运。

总结下选择器吧