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

概述

想要实现对 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变绿
  

id选择器

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

<h1 id="myId">id 选择器</h1>

CSS:

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

h1 标签中的 文字 的颜色会变成 橙色，背景色会变成 粉红色

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" 的元素中的文本都会变成红色

类选择器的综合使用

需求

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

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

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

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

<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

也就是说：

• 不要去试图用一个类名，把某个标签的所有样式写完；这个标签要多携带几个类，共同造成这个标签的样式
• 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用
• 尽可能的用 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;
  }
  

  所有标签中的文本内容都会变成红色