常见css选择器及其优先级别排序

1. 常见CSS选择器

1. id选择器。#id
2. class选择器..class
3. 属性选择器。如：input[type="button"]
4. 组合选择器：

• 多元素选择器“A,B”。，同时匹配所有A元素和B元素，A和B之间用逗号分隔，如：div,p { color:red; }
• 派生选择器（后代选择器）"A B"。匹配所有属于A元素后代的B元素，A和B之间用空格分隔，如：#nav li { display:inline; },li a { font-weight:bold; }
• 直接子元素选择器"A>B"。匹配所有A元素的子元素B。如：div > strong { color:#f00; }
• 相邻元素选择器"A+B"。匹配所有紧随A元素之后的同级元素B，如：p + p { color:#f00; }

5. 标签选择器
6. *通用元素选择器。匹配页面任何元素。很少用到。
7. 伪类选择器。E:XXXXX

2. 选择器的优先级是怎样的?

从高到低分别是：

1. 在属性后面使用!important会覆盖页面任何位置定义的元素样式。
2. 作为style属性写在标签里面的内联样式。
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义
   ~选择器给得越精准权重越高。
   ~当两个选择器权重相同，样式重叠时，后面那一个的权重高。