css选择器与权重

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 可以任何命名