CSS基本选择器

news2024/11/15 13:57:49

文章目录

1. ID 选择器
- 1.1. 语法
- 1.2. 完整写法
2. 类选择器
- 2.1. 语法
- 2.2. 完整写法
3. 元素选择器
4. 通配选择器
5. 基本选择器优先级
6. 基本选择器的总结
7. Google 案例

1. ID 选择器

以 # 开头，后面跟着 ID 名称，根据元素的 ID 名称选择元素，给元素加样式。和类选择器差不多，class 可以有多种，但是 id 只能有一种。

<p id="demo">Hello World</p>

1.1. 语法

#demo {
  color: red;
}

1.2. 完整写法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器</title>
    <style>
      #demo {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="demo">Hello World</p>
  </body>
</html>

2. 类选择器

以 . 开头，后面跟着类别名称。可以根据元素的类，进行加样式。这里我们给 p 标签加一个类，并给该类加一个样式。

<p class="demo">Hello World</p>

2.1. 语法

/* 选中所有class值为demo的元素 */
.demo {
  color: red;
}

2.2. 完整写法

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器</title>
    <style>
      .demo {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="demo">Hello World</p>
  </body>
</html>

这种类选择器要带 . ，而元素的 class 属性值不用带 . 。

这种写法可以让我们准确地给某一个元素加样式，开发也是很常用。

3. 元素选择器

可以选择 HTML 元素，给元素加样式，比如这里可以给 h1 标签加样式，或者给 p 标签，div 标签，a 标签等等元素加样式。

h1 {
  /* 样式可以直接写在html中，这样可以控制整个页面的样式 */
  /* 设置宽度 */
  width: 50px;
  /* 设置高度 */
  height: 50px;
  /* 文字对齐 */
  text-align: center;
}

4. 通配选择器

符号是一个 * ，可以选择所有的元素，可以用来清除样式。

/* 选中所有元素 */
* {
  color: red;
  font-size: 40px;
}

5. 基本选择器优先级

行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器

结论：越是具体的优先级越高，越是通用模糊的优先级越低。

6. 基本选择器的总结

基本选择器	特点
通配选择器	选择所有的元素
元素选择器	选中同种标签的元素
类选择器	根据元素的类进行选择
id 选择器	根据元素的id进行选择

7. Google 案例

用基本选择器改进 Google 案例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04-CSS基本选择器-Google案例</title>
    <style>
      /* 设置颜色 */
      .c1 {
        color: blue;
      }
      .c2 {
        color: red;
      }
      .c3 {
        color: yellow;
      }
      .c4 {
        color: green;
      }
      /* 设置字体 */
      span {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <span class="c1">G</span>
    <span class="c2">o</span>
    <span class="c3">o</span>
    <span class="c1">g</span>
    <span class="c4">l</span>
    <span class="c2">e</span>
  </body>
</html>