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

元素样式来源：

浏览器默认样式
用户自定义样式

行内样式：
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>

标签选择器

<style>
   h2 {
   color: red;
   }
</style>

属性选择器

<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>

群组选择器
中间使用逗号隔开，选择多个

<style>
   h2#a,
   h2.b {
   background-color: yellow;
   }
</style>

通配选择器:

<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>

子元素：
只选择子元素，不选择孙元素，如不选择 item3 下面的 itemsun-1 到 3 使用 “>” 号

<style>
      .list > li {
        border: 1px solid #000;
      }
</style>

后代元素: 使用空格

<style>
      .list li {
        border: 1px solid #000;
      }
</style>

相邻兄弟: 使用 “+” 号
.item 中间空格去掉 second 换成“.”链接起来，否则就是后代元素了
如果用的背景色，内部的孙元素会继承背景色，使用其他属性则不会。

<style>
      .item.second + * {
        background-color: lightcyan;
      }
</style>

所有兄弟: 使用 “~” 号
从某个起到后面所有的选中，例如第二个起到后面所有。

<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 可以无限数量，任意命名

元素样式来源：

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

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

选择器的权重

更多相关文章

随机推荐