首页 > 博客列表 > 元素的样式来源基本选择器/上下文选择器选择器的权重

博主信息

博文 12

粉丝 0

访问量 10735

专题推荐

更多>

一、元素的样式来源

用户代理样式
浏览器内置
自定义样式
- 内联样式
```
<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名称完全自定义，无数据限制，灵活性高。

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点

2021-12-22 23:47:07

一、元素的样式来源

用户代理样式

自定义样式

二、选择器

基本选择器

上下文选择器

子元素（ > ）

后代选择器（ 空格 ）

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

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

三、选择器的权重

权重

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

后代选择器（空格）

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

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