CSS聊一聊css的选择器

Posted 2022-10-29 gg-boy

对于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>

实现效果：

 

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