二、基础选择器

站长

2024年04月05日 20:20 · 阅读数 5

选择器用来选择页面中的标签，方便设置我们需要的样式，比较简单的选择器有以下四类

1. 标签选择器

标签选择器可以通过标签名找到页面中所有的同类的标签，去设置样式。

写法：标签名{css 属性名：属性值;}

比如我们选中了 p 标签，那么页面中所有的 p 标签都会设置同样的样式，而不是单独某一个，不管嵌套关系有多复杂，都能找到对应的 p 标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font-size: 25px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>基础</p>
      <div>
        <p>基础选择</p>
        <div>
          <span>
            <h3>选择器</h3>
          </span>
          <ul>
            <li>
              <p>选择</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

二、基础选择器

2. 类选择器

几乎所有标签上都会有 class 属性，其属性值就是类名。类名也遵循命名规范，可以由数字、字母、下划线、中划线组成，但不能是数字或中划线开头。

一个标签可以同时有多个类名，类名间用空格隔开即可。

类选择器是通过类名找到页面中所有带有这个类名的标签，然后设置样式，类名是可以重复的，一个类选择器可以同时选中多个标签。

写法：.类名{css 属性名：属性值;}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .font {
        border: 2px solid #000;
        font-size: 25px;
      }
      .choose {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <p class="font">基础选择</p>
        <div>
          <span>
            <h3 class="font choose">选择器</h3>
          </span>
          <ul>
            <li class="choose">
              <p>选择</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

二、基础选择器

3. id 选择器

顾名思义，id 选择器就是通过id找到页面中带有这个 id 属性值的标签，设置样式。但一个标签上只能有一个 id 属性值，一个 Id 选择器也只能选中一个标签（ id 属性值在一个页面是唯一的），就类似于我们的身份证号码，不可重复。

写法：#id名{css 属性名：属性值;}

id 选择器通常配合 js 使用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #font {
        color: red;
        font-size: 25px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <p id="font">基础选择</p>
      <div>标签</div>
    </div>
  </body>
</html>

二、基础选择器

4. 通配符选择器

写法：*{css 属性名：属性值;}

通配符标签，给页面中所有的标签设置样式，一般会用于去除标签默认的外边距、内边距。在开发中很少使用，只有在特殊情况下才会用到。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <p>基础选择器</p>
      <div>标签</div>
      <div>通配符选择器</div>
    </div>
  </body>
</html>

二、基础选择器

5. 类选择器与 id 选择器的区别

类名相当于姓名，可以重复，即一个标签可以同时有多个类名
id 属性值相当于身份证号码，是唯一的，即一个标签只能有一个 id 属性值
类选择器以 . 开头，id 选择器以 # 开头

实际开发中，类选择器使用的会比较多，id 一般会配合 js 使用，非必要不要使用 id 选择器设置样式。

实际开发中也可以将一些公共代码放到公共的类中，这样可以减少代码冗余。