CSS基础1：元素样式来源，选择器，权重 -

Home > List of blog posts > CSS基础1：元素样式来源，选择器，权重

Blogger Information

Blog 6

fans 0

comment 1

visits 3350

Special Recommendation

More>

Related recommendations

CSS基础1

1.CSS是什么

Cascading Style Sheets（CSS）既层叠样式表。
主要功能：1. 设置元素样式（翻译：长什么样子） 2.元素布局（翻译：在哪里显示）。

2.元素样式来源有哪些

2.1 CSS工作流：1.找到元素 2.设置样式。

2.2 CSS元素样式来源：

默认样式：用户代理样式（既浏览器样式）。
自定义样式：分为行内样式（style=“…”）,文档样式（style标签），外部样式（style.css使用link标签引用外部文件）
继承样式：（关键词inhert），通常关于文本的颜色，字体，字号可以继承，而盒模型样式不能继承。

2.3 元素样式优先级排序

行内样式 > 文档样式 > 外部样式 > 默认样式 > 继承样式

2.4实例演示几种样式来源：

<!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" />
    <link rel="stylesheet" href="css/style1.css" />
    <title>实例演示样式来源</title>
  </head>
  <body>
    <!-- 1.默认样式来源 -->
    <h1>默认样式</h1>
    <!-- 2.自定义样式 -->
    <!-- 2.1 行内样式 -->
    <h2 style="color: brown">行内样式</h2>
    <!-- 2.2 文档样式 -->
    <h3>文档样式</h3>
    <style>
      h3 {
        color: cadetblue;
      }
    </style>
    <!--  2.3 外部样式  -->
    <h4>外部样式</h4>
    <!-- 继承样式 -->
    <div>
      div父样式
      <p>p标签继承父样式</p>
      <h5>h5继承父样式</h5>
    </div>
    <style>
      div {
        color: yellowgreen;
      }
      p {
        color: thistle;
        color: inherit;
      }
      h5 {
        color: tomato;
        color: inherit;
      }
    </style>
  </body>
</html>

效果图：

3. 选择器

什么是选择器，理解就是要设置css样式的对象，可以作为选择器的对象有以下几种：
3.1基本选择器：tag，例如h1
3.2属性选择器：例如 <h1 title="a"> hello </h1> 种的title，应用中使用h1[titile=”a”]来选择引用。其中 id和class属于高频属性，简化用法为id用”#”代替，class用“.” 代替。推荐是用class，因为在后面权重中id得权重过高，无进一步提升空间。
3.3群组选择器：多个选择器并列，用逗号隔开，例如.a,p {color:red}
3.4通配符选择器：用*号表示，例如 html body *{color:red}
3.5上下文选择器/层级选择器：其中，子元素用”>”表示；后代元素用“空格”表示；邻居兄弟元素用“+ *”表示；所有兄弟元素用“~ *” 表示。
实例代码

<!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>CSS选择器的种类及用法</title>
  </head>
  <body>
    <!-- 1. 基本选择器 tag -->
    <h1>这是基本选择器,使用h1标签</h1>
    <style>
      h1 {
        color: khaki;
      }
    </style>
    <!-- 2. 属性选择器 -->
    <h2 title="a">这是属性选择器，h2[title="a"]</h2>
    <style>
      h2[title="a"] {
        color: red;
      }
    </style>
    <h3 id="a">这是属性选择器，h3#id</h3>
    <style>
      h3#a {
        color: saddlebrown;
      }
    </style>
    <h4 class="a">这是属性选择器，h4.class</h4>
    <style>
      h4.a {
        color: skyblue;
      }
    </style>
    <!-- 3. 通配符选择器 -->
    <div>
      <ul class="list">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <ul class="list2">
          <li class="item">item1</li>
          <li class="item second">item2</li>
          <ul class="list3">
            <li class="item">item1</li>
            <li class="item">item2</li>
            <li class="item">item3</li>
          </ul>
          <li class="item">item3</li>
        </ul>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
      </ul>
      <style>
        /* 子元素选择器“>” */
        .list > li {
          border: 1px solid slateblue;
        }
        /* 后代元素选择器用“空格” */
        .list2 li {
          border: tomato solid 1px;
        }
        /* 邻居兄弟元素选择器用“+ *” */
        .item2 + * {
          background-color: green;
        }
        /* 所有兄弟元素选择器用“~ *” */
        .item.second ~ * {
          color: turquoise;
        }
      </style>
    </div>
  </body>
</html>

效果图：

4.选择器权重

CSS规则是同样名称后写的覆盖前面的，为了保证前面的能生效，产生出权重的概念，权重是由specificity（0，0，0）表示的，个位代表tag数量，十位代表class数量，百位代表id数量，这也是为什么程序员在代码中将id认为成唯一的原因，因为id权重过高，很有可能遇到提权重的瓶颈，tag的语义化标签数量有限，不能满足复杂度需求，class没有数量限制，可以自定义，所以成为代码中最常用的属性，其对增加代码的弹性起到了重要作用。
最重要的是要学会权重的计算，并在实际编程中使用权重。
实例

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
    <h1 class="title" id="active">Hello</h1>
    <style>
      /* 1 1 2 */
      /* 2: 表示2个标签, 
      1: 表示1个class
      1: 表示1个id  */
      body h1.title#active {
        color: red;
      }
      /* 0 1 2 */
      /* 2: 表示2个标签, 
      1: 表示1个class
      0: 表示没有id  */
      body h1.title {
        color: blue;
      }
      /* 就想放在第一行,又想让它生效,只有提权 */
      /* 0 0 2 */
      /* 2: 表示2个标签, 
      0: 表示没有class
      0: 表示没有id  */
      body h1 {
        color: green;
      }
      /* 相同的权重,由位置决定样式 */
      /* 0 0 1 */
      /* 1: 表示只有一个标签, 
      0: 表示没有class
      0: 表示没有id  */
      h1 {
        color: darkorange;
      }
      /* 三个权重的位置, 从右到左
      第1位: 标签数量
      第2位: class数量
      第3位: id数量 */
      /* css 将 id, class, tag 看成一个"三位整数", id -> 百位, class -> 十位, tag -> 个位 */
      /* h1 {
        color: violet !important;
      } */
      /* id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用class */
      /* 为什么不用权重最低的标签呢? 只是标签的数量太少了, 而class可以任何命名 */
      /* bootstrap , element ui  */
    </style>
    <div class="col-md-3 vip">Bootstrap</div>
    <style>
      /* 0 2 1 */
      div.col-md-3.vip {
        border: 5px solid red;
      }
      /* 0 1 1  */
      div.col-md-3 {
        border: 1px solid #000;
      }
    </style>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端环境搭建

2021-12-29 21:51:54