css选择器优先级

CSS新手笔记

1.CSS的定义由三部分构成：

1.基本语法机构：

选择器{
属性：值；
}

2.三个值作用：.
选择器作用： 选中标签对其进行样式美化
属性作用：对元素进行哪些样式美化
值作用：决定属性美化样式的程度
注意：css中的属性与html元素行内属性不是一个东西

2.基本选择器

   通配选择器 选择文档中所有HTML元素,例:*{ margin:10px}

   元素选择器 选择指定类型的HTML元素,例:div{width:100px.height:100px}

   类选择器   选择指定class属性值为“class”的任意类型的任意多个元素;   
             类选择器必须添加 . 为前缀，例：.class{width:100px.height:100px}

   ID选择器   选择指定ID属性值为“id”的任意类型元素   id 属性应该是唯一的 
             定义ID选择器必须添加 # 为前缀，#id{width:100px.height:100px}

   关系型选择器 父子选择器：“>”，例：div>p{};
              子孙选择器：“空格”，例： div span{}
              兄弟选择器：普通兄弟“~”，+相邻兄弟“+”  
              
   属性选择器   元素[属性=值] 例如：input[name=login]

3.选择器优先级

1.优先级：
当创建的样式表越来越复杂时，一个标签的样式将会受到越来越多的影响，这种影响可能来自周围的标签，也可能来自其自身。
浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。

2.CSS选择器如何计算？
a.当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS。
b.CSS优先级是根据由每种选择器类型构成的级联字串计算而成的，它不是一个对应相应匹配表达式的权重值。
c.相同CSS表达式，在DOM结构中的距离是不会对元素优先级计算产生影响的。

3.CSS优先级顺序
优先级从上往下以及权重
行内样式 > 1000
id选择器 > 100
类选择器= 属性选择器 = 伪类选择器 > 10
标签选择器 = 伪元素选择器> 1
通配符>0

4.CSS 优先级规则：
a.选择器都有一个权值，权值越大越优先。
b.当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
c.创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
d.继承的CSS 样式不如后来指定的CSS 样式。
e.在同一组属性设置中标有“!important”规则的优先级最大。

5.!import
为什么没有把!import放在优先级顺序中，因为官方认为!import和优先级没一点关系。

不建议使用!import:
a.绝不要在全站使用!import。
b.只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important。
c.永远不要在你的插件中使用 !important。
d.要优先考虑使用样式规则的优先级来解决问题而不是 !important。

6.css的继承
css的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构：

<div>
    <p></p>
</div>

如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。

7.错误的说法
在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1。
当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值，这种说法其实是有问题的。
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：选择器的权值不能进位。
还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。