【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部分）

     <p>第一段</p>
     <div>
         <div>
             <div>
                 <div>
                     <p>我隐藏的比较深</p>
                 </div>
             </div>
         </div>
     </div>

实现效果：

两个p标签都改变了样式，字体颜色变成了橘黄色。

1.2 类选择器

如果我们只希望更改第一个p标签的样式，而不更改第二个p标签，这时候就可以选择类选择器，具体实现方法就是给标签添加class属性，要注意可以给不同的标签赋予同样的类名，因为物以类聚，人以群分，从而实现同一类的样式控制。给类设样式时我们使用 .类名 的方式。

2css.html（head部分）

     <style>
         /* 选中class含有p1的元素 */
         .p1 {
             color: red;
         }
     </style>

2css.html（body部分）

     <p class="p1">第一段</p>
     <div>
         <div>
             <div>
                 <div>
                     <p>我隐藏的比较深</p>
                 </div>
             </div>
         </div>
     </div>

实现效果：

Q:那么又一个新问题来了，我们能否给一个标签设置不同的类呢？？答案是可以的，我们使用 class="类名1 类名2 ..." 的方式。要注意不同类名之间用空格隔开。

2css.html（head部分）

     <style>
       /* 选中class含有p1的元素 */
         .p1 {
             color: red;
         }
         .h2 {
             text-align: center; /*让文字水平居中*/
             background-color: aqua
         }
     </style>

2css.html（body部分）

 <!--有多个class就写在class属性里面，用空格隔开-->
 <h2 class="p1 h2">二级标题</h2>

实现效果：

1.3 id选择器

id选择器与class选择器很类似，同样是给标签设置id属性，赋予id值。给id设置样式时我们使用 #id值 的格式。其实我们也可以给不同的标签设置同样的id值来实现同类样式控制，但极其不建议这样做。作为一个开发人员，我们必须对id唯一性有一个认识，即每一个id值都是独一无二，不允许重复的。一般我们使用id选择器就是表示一个独一无二的标签。

3css.html（head部分）

     <style>
         /* 选中id值为p2的元素，表示某一个独一无二的区域时常用 */
         #p2 {
             color: blue
         }
     </style>

3css.html（body部分）

     <p>这是段落</p>
     <p id="p2">这是段落</p>
     <p>这是段落</p>

实现效果：

1.4 通配符选择器（基本不用）

通配符选择器就是针对html中的所有标签，用 * 表示，但我们基本不用，因为相比而言，通配符选择器的代价大，效率低。通常使用并集选择器代替（下文有举例）。

3css.html（head部分）

     <style>
         /* 通配符选择器 ，所有工程上很少使用，因为效率太低 */
         * {
             color:blue;
         }
     </style>

3css.html（body部分）

     <div>div</div>
     <p>p</p>
     <h1>h1</h1>

实现效果：

二 高级选择器

除了以上基本选择器之外，我们还需要掌握几种高级选择器，他们功能更强大，开发起来速度更快。

2.1 后代选择器

后代选择器，就是先写出父代，然后再写出子代，以 父代 子代 的方式确定样式作用的标签，以空格连接。

5css.html（head部分）

     <style>
         /*后代选择器，中间以空格连接*/
         ul li {
             font-size: 30px;
             color: green;
         }
         div li {
             background-color: skyblue;
         }
     </style>

5css.html（body部分）

     <ul>
         <li>
             <p>111</p>
         </li>
         <li>222</li>
         <li>333</li>
         <li>444</li>
     </ul>
     <div>
         <ul>
             <li>item</li>
         </ul>
     </div>

实现效果：

2.2 交集选择器

交集选择器，就是既满足条件A,又满足条件B的标签，以 AB 的方式确定样式作用的标签，注意不要用空格连接！

5css.html（head部分）

     <style>
         /*交集选择器 表示给同时满足这两个条件的元素设置样式。。注意中间不能加空格*/
         div.box {
             color: orange;
         }
     </style>

5css.html（body部分）

     <div class="box">
         <ul>
             <li>item</li>
         </ul>
     </div>
     <div>
         这是第二个div
     </div>

实现效果：

只有第一个div改变了样式，因为它的class为box，满足了交集选择器的要求。

2.3 并集选择器

并集选择器就是所列出来的标签都会采用这种样式，以 A,B,C ... 的方式确定样式作用的标签，以,连接。

我们将通配符选择器中所举的例子进行简单更改。

4css.html（head部分）

     <style>
         div,p,h1 {
             color: green;
         }
     </style>

4css.html（body部分）

     <div>div</div>
     <p>p</p>
     <h1>h1</h1>

实现效果：

以上就是关于选择器的相关知识，希望在开发中能够根据实际场景，灵活选择不同的选择器。