css 元素样式来源,基本选择器,上下文选择器与权重(重要)解析

元素样式来源:

  1. 浏览器默认样式

  2. 用户自定义样式

  • 行内样式:
    style=“ ”
  • 文档样式
    <style></style>
  • 外部样式(使用 link 标签引入)
    style.css

3 优先级:行内样式>文档样式>外部样式
另外样式优先级还与书写顺序有关,后写的会覆盖前面写的(权重一样的情况下)

基本选择器:根据元素自身特点来选择

以下面实例代码来演示各个类型的基本选择器:

    <h2>item1</h2>
    <h2 title="hello">item2</h2>
    <h2 id="a">item3</h2>
    <h2 id="a">item4</h2>
    <h2 class="b">item5</h2>
    <h2 class="b">item6</h2>
  1. 标签选择器
<style>
   h2 {
   color: red;
   }
</style>
  1. 属性选择器
<style>
   属性写到中括号里面
   h2[title="hello"] {
   color: green;
   }
   可以简化不写属性值也有效
   h2[title] {
   color: green;
   }
   id: 用于唯一元素
   id 的唯一性由开发者确保
   h2[id="a"] {
   color: blue;
   }
   class: 用于多个元素
   h2[class="b"] {
   color: violet;
   }

   id, class 是高频属性(用的特别多)
    id 简写使用 “#”
   h2#a {
   color: cyan;
   }
    class 简写使用 “.”
   h2.b {
   color: orange;
   }
    推荐尽可能只用 class 权重比较低
</style>
  1. 群组选择器
    中间使用逗号隔开,选择多个
<style>
   h2#a,
   h2.b {
   background-color: yellow;
   }
</style>
  1. 通配选择器:
<style>
   html body  {
   background-color: gray !important;
   }
</style>

如果需要调试,加高权重,使用“!important”,优先级别最高

上下文选择器(也叫层级选择器):

以下面实例代码来演示上下文选择器:

 <ul class="list">
      <li class="item">item1</li>
      <li class="item second">item2</li>
      <li class="item">
        item3
        <ul class="inner">
          <li>itemsun-1</li>
          <li>itemsun-2</li>
          <li>itemsun-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>
  1. 子元素:
    只选择子元素,不选择孙元素,如不选择 item3 下面的 itemsun-1 到 3 使用 ">" 号
<style>
      .list > li {
        border: 1px solid #000;
      }
</style>
  1. 后代元素: 使用空格
<style>

      .list li {
        border: 1px solid #000;
      }
</style>
  1. 相邻兄弟: 使用 "+" 号
    .item 中间空格去掉 second 换成“.”链接起来,否则就是后代元素了
    如果用的背景色,内部的孙元素会继承背景色,使用其他属性则不会。
<style>
      .item.second + * {
        background-color: lightcyan;
      }
</style>
  1. 所有兄弟: 使用 "~" 号
    从某个起到后面所有的选中,例如第二个起到后面所有。
<style>
      .item.second ~ * {
        background-color: yellow;
      }
</style>

选择器的权重

最高级:!important
第一等:内链 style=""
第二等:id 选择器 #h3
第三等:class 选择器 .h3
第四等:空格选择器 div h3
通配符:子选择器、相邻选择器等

1 示例:<h3 id="a" class="b" ></h3>
选择当前的 h3 有 3 种选择器,我们将 id,class,tag 想象成三位整数,初始为 0,0,0

id class tag
百位 十位 个位
0 0 0

由示例可看出大致权重

<style>
  /* 权重:(1,1,1) */
  h3.b#a {
    background-color: red;
  }
  /* 权重:(0,1,1) */
  h3.b {
    background-color: green;
  }
  /* 权重:(0,0,1) */
  h3 {
    background-color: blue;
  }
</style>

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

  • 为什么不推荐用 id?
    因为权重太高, 为了让你的代码具有弹性,尽可能用 class

  • 为什么不用权重最低的标签呢?
    语义化标签太少了,数量有限,class 可以无限数量,任意命名