浅谈CSC选择器和CSS权重

1、css的语法规则

• 由css选择器（selector）,以及一条或多条声明组成，用冒号分开

• 举例：selector{porperty:value} 是key-value的方式

2.为什么会有选择器？

• 选择器是匹配元素的一种模式，不止是在css中

3.基本的选择器

• 元素选择器

<p>
color: red;
</p>

• id选择器

<style>
#notification {
font-size: 14px;
}
</style>
<p id="notification"></p>

• 类选择器

<style>
.first {
  font-weight: bold;
}
.done {
  text-decoration: line-through;
}
</style>
<ul>
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗脸</li>
</ul>

• 通用选择器

* {
  box-sizing: border-box;
}

.flex-container * {
  flex-basis: 100%;
}

• 属性选择器
  [attr]
  [attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

[disabled] {
  cursor: not-allowed;
}

[attr=val]

[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。

[data-color="gray"] {
  color: #ccc;
}

[attr~=val]
[attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
[attr=val]
[attr=val] 选择 attr 属性的值中包含字符串 val 的元素。

[title*="fuck"] {
  display: none;
}

[attr^=val]

[href^="http://"] {
  background-color: #f0ad4e;
}

[attr$=val]

[attr$=val] 选择 attr 属性的值以 val 结尾（包括val）的元素。

[src$="gif"] {
  border: 1px solid #ccc;
}

[attr|=val]

[attr|=val] 选择 attr 属性的值以 val（包括val）或 val-开头的元素（-用来处理语言编码）。

[lang|="zh"] {
  font-family: '微软雅黑';
}

• 伪类选择器

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }

• 为元素选择器

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}
.happy::before {
  content: '😁';
}
p::selection {
  color: white;
  background: blue;
}
::backdrop 实验特性
::first-line 将样式只应用于一个块状元素的首行。
input::-webkit-input-placeholder {
  color: #aaa;
}

介绍完了CSS选择器，下面我们CSS权重问题

在介绍之前我们先来看一道题目

饥人谷三个字的最后的样式是？看完这道题 小编来给你叨一叨CSS的权重~

1、什么是CSS权重？

• 权重决定了你CSS规则怎样被浏览器解析直到生效，即你的
  CSS规则是怎样显示的

2、权重之比

权重顺序：！important>内联>ID>类=伪类=属性>标签（元素）=伪元素> 通配符

怎么确定权重？有几句口诀来看看吧

• 从0开始：
• 一个行内样式+1000；
• 一个id+100;
• 一个属性/类/伪类+10；
• 一个元素/伪元素+1；

举个栗子

p #cover . border a:havor
#cover--id选择器加了100
.border--class类选择器加了1；
最后的权重是： 0122

3.权重的基本规则

• 1、相同的权重：最后面出现的选择器为最后规则
• 2 不同的权值权重高则生效

4、对权重规则的总结一条样式规则的整体权重值包含四个独立部分：[A,B,C,D]

• A表示内联样式，只要1或者0两个值
• B表示规则中ID的数量
• C表示规则中标签和伪元素以外的其他选择器数量
• D表示规则中标签和伪元素的数量比较时从高位到低位（从A到D）分别比较，高位相同才需要比较低位（从A到D）分别比较，高位相同才需要比较低位
• important 注意点：
• 如果多条规则中都对同一个属性指定了!important,这时候！important的作用相互抵消，依然按照ABCD四组计算比较
• ！important的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了！important的属性，所以最好的办法就是不要使用。

5、CSS优先级法则

• A)选择器都有一个权值，权值越大越优先
• B)当权值相等时，后出现的样式表要优于先出现的样式设置
• C)继承的CSS样式优先级低于低于指定的CSS样式
• D)在同一组属性设置中标
  有“！important”规则的优先级最大

再回到之前的题目

msg:100
content 100 p 1 101
.container 10 box 10 p 1 22
p 1 #msg 101
第二行和第四行的权重相同，权重相同的情况下最后面出现的选择器为最后规则。
所以样式是：粉色，14px