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>元素样式来源</title>
  </head>
  <body>
    <!-- 1.继承样式 -->
    <style>
      .a1 {
        font-size: 40px;
        color: blue;
      }
    </style>
    <div class="a1">
      <p>这是P标签，样式继承div标签a1样式颜色、字号。</p>
    </div>
    <!-- 2.默认样式 -->
    <h2>这是h2标签的默认样式</h2>
    <h3>这是h3标签的默认样式</h3>
    <!-- 3.自定义样式 -->
    <!-- 3.1 行内样式 -->
    <p style="color: cadetblue; font-size: 30px">这是p标签定义了行内样式</p>
    <!-- 3.2 文档样式 -->
    <style>
      .aa {
        display: block;
        width: 600px;
        font-size: 30px;
        line-height: 60px;
        color: white;
        background-color: darkcyan;
        border: 1px solid coral;
      }
    </style>
    <p class="aa">这是p标签定义的文档样式</p>
    <!-- 3.3 外部样式 -->
    <link rel="stylesheet" href="/style.css" />
    <p class="wai">这是p标签定义的外部文档sytle.css样式</p>
  </body>
</html>

二、选择器

<!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>选择器</title>
  </head>
  <body>
    <!-- 1. 标签选择器 -->
    <style>
      h2 {
        color: violet;
      }
    </style>
    <h2>通过标签选择器设置样式</h2>
    <!-- 2. 属性选择器 -->
    <style>
      button[value="2"] {
        display: block;
        padding: 15px;
        font-size: 30px;
      }
    </style>
    <button value="2">通过属性选择器设置样式</button>
    <!-- 3. 群组选择 -->
    <ul>
      <li class="qz1">群组选择1</li>
      <li class="qz2">群组选择2</li>
      <li class="qz3">群组选择3</li>
    </ul>
    <style>
      .qz1,
      .qz2,
      .qz3 {
        color: turquoise;
      }
    </style>
    <!-- 4. 通配选择 -->
    <ul class="tp">
      <li class="tp1">通配选择1</li>
      <li class="tp2">通配选择2</li>
      <li class="tp3">通配选择3</li>
    </ul>
    <style>
      .tp * {
        color: rgb(0, 89, 255);
        font-size: 35px;
      }
    </style>
    <!-- 5. 上下文选择器 -->
    <!-- 5.1 子元素 -->
    <div class="z1">
      <h2>子元素选择h2</h2>
      <p>子元素选择p</p>
    </div>
    <style>
      .z1 > h2 {
        color: tomato;
      }
      .z1 > p {
        font-size: 25px;
      }
    </style>
    <!-- 5.2 后代元素选择 -->
    <div class="hd">
      <div>
        <p>孙代元素选择</p>
        <div>
          <p>从孙代</p>
        </div>
      </div>
    </div>
    <style>
      .hd p {
        color: turquoise;
      }
    </style>
    <!-- 5.3 相邻兄弟元素选择 -->
    <div>
      <h1>老大</h1>
      <h2 class="xlxd">老二相邻的兄弟是老三，往后找最近的兄弟</h2>
      <h3>老三</h3>
      <h4>老四</h4>
    </div>
    <style>
      .xlxd + * {
        font-size: 60px;
      }
    </style>
    <hr />
    <!-- 5.4 所有兄弟元素选择 -->
    <div>
      <h1>老大</h1>
      <h2 class="xlxd">老二的所有兄弟是往后找所有的兄弟，因此老大不是</h2>
      <h3>老三</h3>
      <h4>老四</h4>
    </div>
    <style>
      .xlxd ~ * {
        font-size: 60px;
      }
    </style>
  </body>
</html>

三、选择器的权重

1. 权重比较规则

- 把“id”，“class”，“标签” 看成一个三位数的整数

- “id”为百位数，有 1 个为 1，有 2 个为 2…

- “class”为十位数，有 1 个为 1，有 2 个为 2…

- “标签”为个位数，有 1 个为 1，有 2 个为 2…

- 三位数大的选择器权重大

<!-- 选择器的权重 -->
<div class="d"><h2 class="css" id="i">选择器的权重</h2></div>
<style>
  /* 权重：110 */
  .d > #i {
    color: red;
  }
  /* 权重011 */
  div > .css {
    color: sandybrown;
  }
  /* 权重111，最大，所以显示该样式 */
  div > #i.css {
    color: skyblue;
  }
  /* 权重020 */
  .d .css {
    color: slateblue;
  }
</style>

2. 不推荐用 id 和标签作为选择器

id 权重太高, 为了让你的代码具有弹性,尽可能用 class。
标签数量太少了, 而 class 可以有多种命名，使用方便。

CSS 样式来源、选择器和权重复习

CSS 样式来源、选择器和权重

一. 元素样式来源

二、选择器

三、选择器的权重

1. 权重比较规则

- 把“id”，“class”，“标签” 看成一个三位数的整数

- “id”为百位数，有 1 个为 1，有 2 个为 2…

- “class”为十位数，有 1 个为 1，有 2 个为 2…

- “标签”为个位数，有 1 个为 1，有 2 个为 2…

- 三位数大的选择器权重大

2. 不推荐用 id 和标签作为选择器

更多相关文章

随机推荐