样式的优先级、选择器与权重

样式的优先级、选择器与权重

样式优先级

自定义样式 > 默认样式 > 继承样式

自定义样式: <h2 style="color: red;">Hello</h2>

内联样式>文档样式、外部引用
文档样式与外部引用优先级取决于书写顺序
外部引用:<link rel="stylesheet" href="">,封装css代码,可以实现代码的复用

默认样式:h2 标签默认字体为黑色

继承样式:h2 字体颜色样式继承 div 的样式,不是所有的样式都能被继承

<div style="color: blue;">
  <h2>Hello</h2>
</div>

---

基本选择器

标签选择器、属性选择器、群组选择器、通配选择器

标签选择器

h1 {
  color: red;
}

属性选择器

h1.class {
  color: blue;
}
div#id {
  border: 1px solid;
}

群组选择器(用,隔开)

div#id,
div.class {
  width: 200px;
  height: 200px;
}

通配选择器

* {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: gray !important;
  /* !important: 临时提权到最高权重，用于调试 */
}

上下文选择器

<ul class="list">
    <li class="item"></li>
    <li class="item">
        <ul class="list_item">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </li>
    <li class="item"></li>
    <li class="item item_four"></li>
    <li class="item"></li>
</ul>

1.子元素 >

.list > .item{
}

2.后代元素 空格

.list_item  .item{
}

3.相邻兄弟 +

/* 多个class名时候直接链式写 */
/* 只能向下选择 */
/* 不确定标签和元素的情况最好用通配符 */
.list > .item.item_four + *{
}
.list > .item.item_four + .item + .item{
/* 可以选择当前向下第两个标签 */
}

4.所有兄弟 ~

.list > .item.item_four ~ * {
}

权重

Selector Specificity(0,0,0) : (id,class,tag)

h1{
  /* (0,0,1) */
}
h1.class{
  /* (0,1,1) */
}
h1#id.class{
  /* (1,1,1) */
}
/* 用更大的权重更改属性 */
/* 尽量少用或不用id,因为id权重过大,没有调试空间 */