CSS-基础选择器，标签选择器、id 选择器、类选择器、通配符 *的用法详解

超、凢脫俗 2023-08-17 16:28 170阅读 0赞

## 概述 ##

想要实现对 HTML 页面中的元素进行一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器；CSS 选择器有很多，大致可分为：基础选择器、高级选择器、伪类选择器和 CSS3 选择器

#### 基础选择器 ####

##### 标签选择器(就是标签的名字) #####

*  所有的标签，都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等
 *  无论这个标签藏的多深，一定能够被选择上
 *  标签选择器，选择的是所有，而不是一个
 *  标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
    
        <ul>
          <li>
            嵌套了 ul
            <ul>
              <li>
                <div>
                  <p>"我是很深的p"</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
    
    CSS:
    
        /* 选择页面中所有的 p 标签 */
        p { 
        	color: green;
        }
        /* 选择页面中所有结构为 ul li 中的 li 标签 */
        ul li { 
         /* 设置 li 的边框 */
          border: 1px solid gray;
        }
    
    能够让很深的p变绿  
    ![在这里插入图片描述][20190928195749570.png]

##### id选择器 #####

*  通过 id 选择器给指定 id 的元素添加样式，网页中 HTML 标记的 id 属性的值，任何的HTML标签都可以有id属性，其值必须是唯一的
 *  id 属性一般是给 JS 使用的，id 选择器的名称，必须以 “\#” 开头
 *  这个标签的 id 属性值的命名规则：
    
     *  只能有字母、数字、下划线
     *  必须以字母开头
     *  不能和标签同名；比如 id 不能叫做 body、img、a 等
 *  一个HTML页面，不能出现相同的 id(id必须是唯一的)，哪怕他们不是一个类型的标签，比如页面上有一个 id 为 myId 的 p 标签，一个 id 为 myId 的 div 标签，是非法的！

CSS:

#myId{ 
    	color:orange;
    	background-color:pink;
    }

`h1` 标签中的 **文字** 的颜色会变成 橙色，**背景色**会变成 粉红色  
![在这里插入图片描述][20190928201147214.png]

##### class选择器(类选择器) #####

*  给一类 HTML 标签设置样式
 *  class 属性是公共属性，任何的标签都可以携带class属性
 *  class 属性和 id 非常相似，使用时需要给 class 属性命名（设置属性值）
 *  类选择器的名称，必须以 “.” (英文状态下的点) 开头，class 属性只能给 CSS 用
 *  class 属性可以重复，比如，页面上可能有很多标签都有 “teshu” 这个类（一对多，多个标签使用同一个类）
 *  同一个标签，可能同时属于多个类（多对一，多个类选择器作用于一个元素），多个类用空格隔开，例如：
    
        <h3 class="teshu zhongyao">我是一个h3啊</h3>
    
    这样，这个 h3 标签就同时属于 teshu 类和 zhongyao 类

示例：

<h3>我是一个h3啊</h3>
     <h3 class="teshu">我也是一个h3啊</h3>
     <h3>巧了，我也是一个h3啊</h3>
     <p>我是一个段落啊</p>
     <p class="teshu">我也是一个段落啊</p>
     <p class="teshu">真巧，我也是一个段落啊</p>

CSS:

.teshu{ 
    	color: red;
    }

所有 `class="teshu"` 的元素中的文本都会变成红色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

###### 类选择器的综合使用 ######

需求

*  段落1：60px+绿色
 *  段落2：绿色
 *  段落3：60px+下划线

思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：

.lv{ 
        /*字体颜色为绿色*/    
        color:green;
    }
    .da{ 
        /*字体大小为 60px*/
        font-size: 60px;
    }
    .xian{ 
        /*为文字添加下划线*/
        text-decoration: underline;
    }

每个标签，就去选取自己想要的类：

![在这里插入图片描述][20190928204454294.png]  
也就是说：

*  不要去试图用一个类名，把某个标签的所有样式写完；这个标签要多携带几个类，共同造成这个标签的样式
 *  每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用
 *  尽可能的用 class，除非极特殊的情况可以用 id
    
     *  原因：id是js用的；也就是说，js要通过id属性得到标签，所以我们 css 层面尽量不用 id
 *  一个标签可以同时被多种选择器选择，标签选择器、id选择器、类选择器；这些选择器都可以选择上同一个标签，从而影响样式，这就是css的 cascading“层叠式” 的第一层含义

##### 通配符 \* #####

*  “\*” 就表示所有元素
 *  效率不高，如果页面上的标签越多，效率越低
    
        <h1>h1标签</h1>
        <ul>
          <li>ul li 标签</li>
        </ul>
        <p>p标签</p>
        <div>
          div标签
          <span>span 标签</span>
        </div>
    
    CSS：
    
        *{ 
            color:red;
        }
    
    所有标签中的文本内容都会变成红色  
    ![在这里插入图片描述][20190928203935755.png]

[20190928195749570.png]: /images/20230810/13163b0cead6491892d899149093d03a.png
[20190928201147214.png]: /images/20230810/6ee0998ff0eb43e98279c6b625b79813.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230810/cb406a85c4654f6ca3532789cd6a50e9.png
[20190928204454294.png]: /images/20230810/77b966a556e1484eb4c8f1c02074fcc8.png
[20190928203935755.png]: /images/20230810/f67b0e0dad014a61b162049534834f58.png