【CSS】聊一聊css的选择器
对于css来说，他的基本语法就是
选择器 {
K:V;
K:V;
K:V
}
所以css的学习就分为两个部分：
* 1 选择器 选中元素(标签)
* 2 各种属性
其中选择器尤为重要，因为如果无法确定样式具体作用的标签，那么设置样式也就无从谈起。所以今天我们一起来聊一聊css中的选择器。
一 基本选择器
首先我们需要掌握几种基本选择器，如果能熟练掌握基本选择器，实际上就可以开发出大部分的页面样式。
1.1 标签选择器
最基本的选择器就是标签选择器，标签选择器就是直接使用div，p这种标签名，这种设定会影响到页面中所有的该标签。
2css.html（head部分）
<style> /* 所有p标签都起作用*/ p { color: orange; } </style>
2css.html（body部分）
1 <p>第一段</p> 2 <div> 3 <div> 4 <div> 5 <div> 6 <p>我隐藏的比较深</p> 7 </div> 8 </div> 9 </div> 10 </div>
实现效果：
两个p标签都改变了样式，字体颜色变成了橘黄色。
1.2 类选择器
如果我们只希望更改第一个p标签的样式，而不更改第二个p标签，这时候就可以选择类选择器，具体实现方法就是给标签添加class属性，要注意可以给不同的标签赋予同样的类名，因为物以类聚，人以群分，从而实现同一类的样式控制。给类设样式时我们使用 .类名 的方式。
2css.html（head部分）
1 <style> 2 /* 选中class含有p1的元素 */ 3 .p1 { 4 color: red; 5 } 6 </style>
2css.html（body部分）
1 <p class="p1">第一段</p> 2 <div> 3 <div> 4 <div> 5 <div> 6 <p>我隐藏的比较深</p> 7 </div> 8 </div> 9 </div> 10 </div>
实现效果：
Q:那么又一个新问题来了，我们能否给一个标签设置不同的类呢？？答案是可以的，我们使用 class="类名1 类名2 ..." 的方式。要注意不同类名之间用空格隔开。
2css.html（head部分）
1 <style> 2 /* 选中class含有p1的元素 */ 3 .p1 { 4 color: red; 5 } 6 .h2 { 7 text-align: center; /*让文字水平居中*/ 8 background-color: aqua 9 } 10 </style>
2css.html（body部分）
1 <!--有多个class就写在class属性里面，用空格隔开--> 2 <h2 class="p1 h2">二级标题</h2>
实现效果：
1.3 id选择器
id选择器与class选择器很类似，同样是给标签设置id属性，赋予id值。给id设置样式时我们使用 #id值 的格式。其实我们也可以给不同的标签设置同样的id值来实现同类样式控制，但极其不建议这样做。作为一个开发人员，我们必须对id唯一性有一个认识，即每一个id值都是独一无二，不允许重复的。一般我们使用id选择器就是表示一个独一无二的标签。
3css.html（head部分）
1 <style> 2 /* 选中id值为p2的元素，表示某一个独一无二的区域时常用 */ 3 #p2 { 4 color: blue 5 } 6 </style>
3css.html（body部分）
1 <p>这是段落</p> 2 <p id="p2">这是段落</p> 3 <p>这是段落</p>
实现效果：
1.4 通配符选择器（基本不用）
通配符选择器就是针对html中的所有标签，用 * 表示，但我们基本不用，因为相比而言，通配符选择器的代价大，效率低。通常使用并集选择器代替（下文有举例）。
3css.html（head部分）
1 <style> 2 /* 通配符选择器 ，所有工程上很少使用，因为效率太低 */ 3 * { 4 color:blue; 5 } 6 </style>
3css.html（body部分）
1 <div>div</div> 2 <p>p</p> 3 <h1>h1</h1>
实现效果：
二 高级选择器
除了以上基本选择器之外，我们还需要掌握几种高级选择器，他们功能更强大，开发起来速度更快。
2.1 后代选择器
后代选择器，就是先写出父代，然后再写出子代，以 父代 子代 的方式确定样式作用的标签，以空格连接。
5css.html（head部分）
1 <style> 2 /*后代选择器，中间以空格连接*/ 3 ul li { 4 font-size: 30px; 5 color: green; 6 } 7 div li { 8 background-color: skyblue; 9 } 10 </style>
5css.html（body部分）
1 <ul> 2 <li> 3 <p>111</p> 4 </li> 5 <li>222</li> 6 <li>333</li> 7 <li>444</li> 8 </ul> 9 <div> 10 <ul> 11 <li>item</li> 12 </ul> 13 </div>
实现效果：
2.2 交集选择器
交集选择器，就是既满足条件A,又满足条件B的标签，以 AB 的方式确定样式作用的标签，注意不要用空格连接！
5css.html（head部分）
1 <style> 2 /*交集选择器 表示给同时满足这两个条件的元素设置样式。。注意中间不能加空格*/ 3 div.box { 4 color: orange; 5 } 6 </style>
5css.html（body部分）
1 <div class="box"> 2 <ul> 3 <li>item</li> 4 </ul> 5 </div> 6 <div> 7 这是第二个div 8 </div>
实现效果：
只有第一个div改变了样式，因为它的class为box，满足了交集选择器的要求。
2.3 并集选择器
并集选择器就是所列出来的标签都会采用这种样式，以 A,B,C ... 的方式确定样式作用的标签，以,连接。
我们将通配符选择器中所举的例子进行简单更改。
4css.html（head部分）
1 <style> 2 div,p,h1 { 3 color: green; 4 } 5 </style>
4css.html（body部分）
1 <div>div</div> 2 <p>p</p> 3 <h1>h1</h1>
实现效果：
以上就是关于选择器的相关知识，希望在开发中能够根据实际场景，灵活选择不同的选择器。
