元素的样式来源基本选择器/上下文选择器选择器的权重

程序员文章站 2022-05-26 12:25:49

...

一、元素的样式来源

用户代理样式
浏览器内置
自定义样式
- 内联样式
```
<h1 style="color: red;">php.cn</h1>
```

文档样式


<style>
         h1 { color: yellow;}
</style>
<body>
         <h1>php.cn</h1>
</body>

外部样式


<head>
       <link rel="stylesheet" href="css/style.css">
</head>
<body>
       <h1 style="color: red;">php.cn</h1>
</body>

二、选择器

基本选择器

标签选择器


<!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>
  /* 标签选择器 */
  h2 {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>
<h2>PHP中文网</h2>
</body>
</html>

- 属性选择器

通过class


<!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>
/* 类选择器 */
.title {
  color: #f60;
  font-weight: bold;
}
</style>
</head>
<body>
<h2 class="title">PHP中文网</h2>
</body>
</html>

通过ID


<!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>
/* ID选择器 */
#title {
  color: green;
  font-weight: bold;
}
</style>
</head>
<body>
<h2 id="title">PHP中文网</h2>
</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>Document</title>
<style>
/* 属性选择器 */
h2[dat="GuanFang"] {
  color: rgb(6, 115, 204);
  font-weight: bold;
}
</style>
</head>
<body>
<h2 dat="GuanFang">PHP中文网</h2>
<h2>第十八期</h2>
</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>Document</title>
<style>
  /* 群组选择器 */
  .title,
  #qishu {
    color: rgb(204, 6, 138);
    font-weight: bold;
  }
</style>
</head>
<body>
<h2 class="title">PHP中文网</h2>
<h1 id="qishu">第十八期</h1>
</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>Document</title>
<style>
  /* 群组选择器 */
  * {
    color: rgb(92, 6, 204);
    font-weight: bold;
  }
</style>
</head>
<body>
<h2 class="title">PHP中文网</h2>
<h1 id="qishu">第十八期</h1>
</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>Document</title>
<style>
  /* 子元素选择器 > */
  div > span {
      background-color: red;
      color: #fff;
      padding: 10px;
  }
</style>
</head>
<body>
  <h2>PHP中文网</h2>
  <h1>第十八期</h1>
  <div>
      <p>item1</p>
      <p>item2</p>
      <p>item3</p>
      <span>php.cn</span>
  </div>
  <p>我是一个段落标签</p>
  <a href="#">我是一个链接标签</a>
</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>Document</title>
    <style>
      /* 后代素选择器  */
      div span {
          background-color: red;
          color: #fff;
          padding: 10px;
      }
    </style>
  </head>
  <body>
      <h2>PHP中文网</h2>
      <h1>第十八期</h1>
      <div>
          <p>
              <span>item0</span>
          </p>
          <p>item2</p>
          <p>item3</p>
          <span>php.cn</span>
      </div>
      <p>我是一个段落标签</p>
      <a href="#">我是一个链接标签</a>
  </body>
</html>

- 相邻兄弟选择器（ + ）只能往下选1个


<!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>
      /* 相邻兄弟素选择器  */
      h2 + h1 {
          background-color: red;
          color: #fff;
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>PHP中文网</h2>
    <h1>第十八期</h1>
    <div>
        <p>
            <span>item0</span>
        </p>
        <p>item2</p>
        <p>item3</p>
        <span>php.cn</span>
    </div>
    <p>我是一个段落标签</p>
    <a href="#">我是一个链接标签</a>
  </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>Document</title>
    <style>
      /* 相邻兄弟素选择器  */
      h2 ~ * {
          border: 1px solid red;
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>PHP中文网</h2>
    <h1>第十八期</h1>
    <div>
        <p>
            <span>item0</span>
        </p>
        <p>item2</p>
        <p>item3</p>
        <span>php.cn</span>
    </div>
    <p>我是一个段落标签</p>
    <a href="#">我是一个链接标签</a>
  </body>
</html>

三、选择器的权重

权重
同权重的后者覆盖前者；
不同权重可用公式来计算：百位（ID数量），十位（CLASS数量），个位（TAG标签数量）；
!important的权重最高。
例：
#id.title p 权重为：1 1 1
div#id.vip p 权重为：1 1 2
结论：后者优先级高于前者
为什么不推荐使用id和tag,而是class
- id权重太高，后期维护不便；
- tag数量太少，不灵活；
- class名称完全自定义，无数据限制，灵活性高。

上一篇：伪类选择器与盒模型属性实例解析,附字体图标引入

下一篇：闭包的原理与经典应用场景，访问器属性，类与对象的创建与成员引用，数组与对象的解构过程与经典案例，JS引入到浏览器中的的方法及获取DOM元素的两个API

元素的样式来源基本选择器/上下文选择器选择器的权重

一、元素的样式来源

用户代理样式

自定义样式

二、选择器

基本选择器

上下文选择器

子元素（ > ）

后代选择器（空格）

相邻兄弟选择器（ + ）只能往下选1个

所有兄弟选择器（ ~ ）往下所有兄弟

三、选择器的权重

权重

为什么不推荐使用id和tag,而是class

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置＜span＞和＜a＞标签的样式

vue多个元素的样式选择器问题

css 元素样式来源，基本选择器，上下文选择器与权重（重要）解析

css基础之元素样式，基本选择器和选择器的权重

CSS的元素样式来源及选择器的使用学习

元素的样式来源基本选择器/上下文选择器选择器的权重

css 元素样式来源，基本选择器，上下文选择器与权重（重要）解析

css基础之元素样式，基本选择器和选择器的权重

CSS的元素样式来源及选择器的使用学习

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose

元素的样式来源 基本选择器/上下文选择器 选择器的权重

一、元素的样式来源

用户代理样式

自定义样式

二、选择器

基本选择器

上下文选择器

子元素（ > ）

后代选择器（ 空格 ）

相邻兄弟选择器（ + ） 只能往下选1个

所有兄弟选择器（ ~ ） 往下所有兄弟

三、选择器的权重

权重

为什么不推荐使用id和tag,而是class

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

vue多个元素的样式选择器问题

css 元素样式来源，基本选择器，上下文选择器与权重（重要）解析

css基础之元素样式，基本选择器和选择器的权重

CSS的元素样式来源及选择器的使用学习

元素的样式来源 基本选择器/上下文选择器 选择器的权重

css 元素样式来源，基本选择器，上下文选择器与权重（重要）解析

css基础之元素样式，基本选择器和选择器的权重

CSS的元素样式来源及选择器的使用学习

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose

元素的样式来源基本选择器/上下文选择器选择器的权重

后代选择器（空格）

相邻兄弟选择器（ + ）只能往下选1个

所有兄弟选择器（ ~ ）往下所有兄弟

使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置＜span＞和＜a＞标签的样式

元素的样式来源基本选择器/上下文选择器选择器的权重