css选择器与权重

16lz 2022-01-23

1.实例演示: 元素的样式来源

行内样式
<h2 style="color:red">我爱前端</h2>
文档样式

<style>
  h2 {
    color: red;
  }
</style>
<h2>我爱前端</h2>

外部样式
1.css

h2 {
  color: red;
}

<link rel="stylesheet" href="1.css" />
<h2>我爱前端</h2>

继承样式
通常颜色，字体，字号等可以被继承，而模型的属性不行

<style>
  div {
    color: red;
  }
  p {
    color: inherit;
  }
</style>
<div>
  <p>我爱前端</p>
</div>

样式的优先级

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

2.实例演示: 基本选择器, 上下文选择器

基本选择器

标签选择器
h2 {color:red}
属性选择器
h2[title="hello"] {color:red}
id 选择器用于唯一
h2#testa {color:red}
class 选择器用于多个元素
h2.testb {color:red}
群组选择器
h2#testa, h2.testb {color:red}
通配选择器
html body * {color:red}

上下文选择器

子元素选择器
.list > li {border: 1px solid #000}
后代元素选择器
.list li {border: 1px solid #000}
相邻兄弟选择器
.test + * {background-color:red}
所有兄弟选择器
.test ~ * {background-color:red}

3.实例演示: 选择器的权重, 并分析为什么不推荐使用 id 和 tag,而是 class

选择器的权重

css 将 id, class, tag 看成是一个三位整数 id 代表百位 class 代表十位 tag 代表个位
第一位表示 id 的数量，第二位表示 class 的数量，第三位表示 tag 的数量
css 权重 0 0 1
h2 {color:red}
css 权重 0 0 2
div h2 {color:red}
css 权重 0 1 0
.test {color:red}
css 权重 1 0 0
#test {color:red}

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

id 因为权重太高，为了让你的代码具有弹性，尽可能用 class 命名和使用 class 选择器
为什么不用权重最低的标签呢？因为标签的数量太少，而 class 可以任何命名

更多相关文章

随机推荐