如果你在项目中使用了通用的reset.css样式，但是你需要在特定页面覆盖相同的样式而不使用scoped和inner样式，你会怎么办？你会不会在第一次接触的时候给要覆盖的样式加上!important属性？举个详细的例子，下面代码的输出样式是什么？为什么是你说的答案？CSS的三大特性——继承、优先级和级联。继承：子类元素继承父类的样式；priority：指不同类别样式的权重比较；级联：指的是数量相同时级联（后者覆盖前者）的样式。CSS选择器的分类我们先来看看什么是CSS选择器（css??selectors）？1、标签选择器（如：body、div、p、ul、li）2、类选择器（如：class="head",class="head_logo"）3、id选择器（如：id="name",id="name_txt")4.全局选择器（如：*号）5.组合选择器（如：.head.head_logo，注意两个选择器之间用空格隔开）6.后代选择器（如as:#head.navulliselectorsfromparentsettodescendantset)7.分组选择器div,span,img{color:Red}即相同样式的标签分组显示8.继承选择器（如：divp，注意两个选择器之间用空格隔开）9.伪类选择器（如：链接样式，一个元素的伪类，4种不同的状态：link,visited,active,hover.）10.属性选择器用于字符串匹配（^$*三种，分别对应start、end、contain）11.子选择器（如：div>p，带大于号>）12.CSS相邻兄弟选择器（如：h1+p,带加号+)CSS优先级当two规则应用于同一个html元素，如果定义的属性冲突，应该使用哪一个CSS有一组优先级定义。不同级别在属性覆盖页面内任意位置定义的元素样式后使用!important。作为样式属性写在元素内部的样式id选择器类选择器标签选择器通配符选择器浏览器自定义或继承总结排序：!important>内联样式>ID选择器>类选择器>标签>通配符>继承>浏览器的默认属性是在同一水平。同一级别后面写的样式会覆盖前面写的样式。上面的层级还是比较容易理解的，但是有时候有些规则是多个层级的组合，比如这个CSS优先级：由四个层级和每个层级出现的次数组成。四个级别分别是：内联选择器ID选择器类别选择器元素选择器优先级算法：每条规则对应一个初始的“四位数”：0,0,0,0如果是内联选择器，则加1,0,0,0如果是ID选择器，加0,1,0,0如果是类选择器/属性选择器/伪类选择器，分别加0,0,1,0如果是元素选择器/伪类选择器，分别添加0、0、0、1。算法：将每条规则中选择器对应的数字相加后得到的“四位数”相加，从左到右比较。优先级越大，优先级越高。高的。为了更好的理解这些计算规则，举一些例子如下：selector的分析原理过去认为selectorDOM元素的定位是从左到右。在网上查了相关资料后，发现我一直都是不正确的。郑重声明，选择器以从右到左的方向定位DOM元素，这样的好处是可以尽早过滤掉一些不相关的样式规则和元素。简单高效的css所谓高效就是让浏览器寻找更少的元素标签来确定匹配的样式元素。1、不要在ID选择器前使用标签名说明：ID选择器是唯一的，加上标签名就相当于画蛇添足，没有必要。2、类选择器前不要使用标签名说明：如果没有同名可以不用，但是如果有多个同名类选择器，则需要加标签名，以防混淆，如(p.colclass{color:red;}和span.colclass{color:red;}3.尽量少用层级关系；#divclassp.colclass{color:red;}改为.colclass{color:red;4.使用类选择器而不是层级关系5.保持CSS可读性
