Community Learn Tools Library Leisure

English

Home > List of blog posts > css基础之元素样式，基本选择器和选择器的权重

Blogger Information

Blog 13

fans 0

comment 0

visits 6872

Special Recommendation

More>

Related recommendations

css 基础

css 是什么？
css 是层叠样式表
功能：元素样式（元素长什么样）和元素布局（元素应该放在哪里）
元素样式的来源

1.浏览器默认样式（又叫用户代理样式）
|样式|定义|
|——-|——-|
|用户代理样式|浏览器默认样式|
|用户自定义样式|我们的编程目标|

权重	样式	代码
3	行内样式	style=”…”;
2	内部样式/文档样式	\<style>
1	外部样式	.css 文件
0	默认样式	—-

示例代码：

<!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>Document</title>
  </head>
  <body>
    <h2>hello word</h2>
  </body>
</html>

style="";

默认样式
自定义样式

样式来源除了与优先级有关系还与书写顺序有关
写到后面的会覆盖前面的

css 工作流：1.找到元素 2.设置样式

选择器
选择器{一个或多个样式声明}

| 序号 | 选择器/selector | 代码 | 说明： |
| —— | ———————- | ———————— | —————————————— |
| 1 | 标签选择器 | h1{} | 直接使用标签进行选择 |
| 2 | 属性选择器 | [...],id,class | 通过标签的属性进行选择 |
| 3 | 群组选择器 | h1,h2,h3 | 选择多个元素进行声明 |
| 4 | 通配选择器 | * | 选中某个标签下所有的标签元素 |
| 5 | 上下文选择器 | * | 选中某个标签下所有的标签元素 |

1.标签选择器

<!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>Document</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
    </div>
  </body>
</html>

2.属性选择器

<!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>Document</title>
    <style>
      h1.h1{
        color: green;
      }
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </body>
</html>

3.群组选择器

<!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>Document</title>
    <style>
      h1.h1,h1{
        color: green;
      }
      /* h1 {
        color: red;
      } */
    </style>
  </head>
  <body>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </body>
</html>

4.通配选择器

<!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>Document</title>
    <style>
      html body  div * {
        color: green;
      }
      /* h1.h1, */
      /* h1 {
        color: red;
      } */
    </style>
  </head>
  <body>
    <table>
    <div>
      <h1>hello word</h1>
      <h1 class="h1">hello word</h2>
    </div>
  </table>
  </body>
</html>

5.上下文选择器

<!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>Document</title>
    <style>
      .list .item.one + * {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">
        item3
        <ul class="list one">
          <li class="item one">item3-1</li>
          <li class="item">item3-2</li>
          <li class="item">item3-3</li>
        </ul>
      </li>
      <li class="item">item4</li>
      <li class="item">item5</li>
      <li class="item">item6</li>
      <li class="item">item7</li>
      <li class="item">item8</li>
    </ul>
  </body>
</html>

继承inherit

<!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>Document</title>
    <style>
      .div {
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        color: red;
      }
      .p {
        color: green;
        color: inherit;
      }
    </style>
  </head>
  <body>
    <div class="div">
      <p class="p">tag p</p>
    </div>
  </body>
</html>

选择器的权重

权重分析

两个 p 标签权重都是 0,0,1
写在后面的样式生效，如果我们想要让写在前面的 p 标签蓝色生效，就需要提权

<!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>Document</title>
    <style>
      p {
        color: blue;
      }
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>选择器的权重</p>
    </div>
  </body>
</html>

这里我们在\<style>里把写在上方的 p 标签的样式提权，可以这么做

<!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>Document</title>
    <style>
      /* 权重：0,0,4 */
      html body div p {
        color: blue;
      }
      /* 权重：0,0,3 */
      body div p {
        color: blueviolet;
      }
      /* 权重：0,0,2 */
      div p {
        color: burlywood;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>选择器的权重</p>
    </div>
  </body>
</html>

这里我们可以看出这四种写法权重都不同，也就代表着每个 tag 的权重都为 1，权重越高越优先

我们再来看另一种权重，类权重（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>Document</title>
    <style>
      /* 权重(0,1,1) */
      p.p {
        color: blue;
      }
      /* 权重(0,1,0)       */
      .p {
        color: green;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="p">选择器的权重</p>
    </div>
  </body>
</html>

这里我们可以看到同样都是选择的同一个 p 标签但是权重各不同，写在最上方的 p.p 权重最高

我们再来看一个 id 选择器的权重

<!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>Document</title>
    <style>
      /* 权重(1,0,0) */
      #p {
        color: hotpink;
      }
      /* 权重(0,1,1) */
      p.p {
        color: blue;
      }
      /* 权重(0,1,0)       */
      .p {
        color: green;
      }
      /* 权重：0,0,1       */
      p {
        color: red;
        width: 100px;
        height: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="p" id="p">选择器的权重</p>
    </div>
  </body>
</html>

这里使用了 id 选择器，权重直接变成了(1,0,0)

总结
选择器的权重和标签，id，class 的数量有关系权重越高优先级越大

序号	选择器	标识	权重
1	标签	tag	(0,0,1)
2	class	“.”	(0,1,0)
3	id	“”#””	(1,0,0)

为什么不推荐使用 Tag 和 id 做选择器？

不推荐使用 Tag 的原因
Tag 的数量优先，class 可以自定义，发挥的空间要远大于 Tag
不推荐使用 id 的原因
经过选择器的分期我们就可以得出为什么不使用 id 作为选择器，就是因为 id 的权重太高！！！

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：可以适当再学习一下如何用markdown语法画表格

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

Ement常用语法、元素的四类属性、一些常用的布局标签

2021-12-22 23:36:10