css 选择器和优先级

1. css选择器

1 .className1.className2 : 选择class属性中同时具有className1和className2的所有元素;
2 .className1 .className2: 选择类名className1元素后代的所有类名为className2的元素;
3 #idName: 选择id为idName的所有元素;
4 *: 选择所有元素;
5 element(div,p等标签): 所有改标签元素;
6 element.className: 选择class为className的所有element元素;
7 div, p : 选择所有div和p元素;
8 div p : 选择div内的所有p元素;
9 div > p: 选择父元素是div的所有p元素;
10 div + p : 选择紧跟div的首个p元素;
11 p::after: 在每个p元素的内容之后插入内容;
12 p::before: 在每个p元素的内容之前插入内容;

2. css 优先级

• 2.1 css 优先级算法
  每个规则对应一个初始"四位数"：0、0、0、0;若是 行内选择符，则加1、0、0、0;若是 ID选择符，则加0、1、0、0;若是 类选择符/伪类选择符，则分别加0、0、1、0;若是 元素选择符，则分别加0、0、0、1;
  算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
• 2.2 css选择器优先级最高到最低顺序:
  id选择器（#myid）> 类选择器（.myclassname）> 标签选择器（div,h1,p）> 子选择器（ul < li）> 后代选择器（li a）> 伪类选择（a:hover,li:nth-child）

注: !important的优先级是最高的，但出现冲突时则需比较”四位数“;优先级相同时，则采用就近原则，选择最后出现的样式;继承得来的属性，其优先级最低。

CSS 选择器参考手册