浅谈CSC选择器和CSS权重

1、css的语法规则

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

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

2.为什么会有选择器？

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

3.基本的选择器

元素选择器


color: red;

id选择器

类选择器



  起床
  刷牙
  洗脸

通用选择器

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