css优先级

1. css样式计算

（1）默认情况下，浏览器给元素有一个默认的样式。

（2）如果元素继承了父元素的样式，则继承的样式覆盖浏览器默认的样式。

（3）如果给元素指定了样式，则会覆盖继承的样式和浏览器默认的样式。可能有多个位置给一个元素的指定了样式，则需要根据优先级来确定元素使用哪个样式。

2. 给元素指定样式

根据指定的样式的位置，可分为外部样式、内部样式和内联样式。外部样式是从外部引用的样式、内部样式是在html中style标签内写的样式，内联样式是通过属性style=''设置的样式。

   <head>

　　　　<style type="text/css">

　　　　　　<!--内部样式-->

　　　　　　p{font-size:20px}

　　　　</style>

　　　　<!--外部样式-->

　　　　<link rel="stylesheet" type="text/css" href="style.css"/>

　</head>

　<body>
　　　<p style="font-size:12px">段落文字</p><!--内联样式-->
  </body>

　指定样式的优先级：

　（1）important优先级最高。

（2）若没有important，计算权值，权值大的优先级越高。　

　　根据选择器不同，有五类权值：

　　　a. 内联样式：1000

　 b. ID选择器：100

　　　c. 类选择器、属性选择器和伪类选择器：10

　　　d. 元素和伪元素选择器：1

　　　e. 结合符和通配符：0

　　　一次定义选择器的优先权等于各类选择器权值相加。

　　　如:

      #main{

　　　　　　color: red;/*权值为100*/
　　　　}

　　　　div #main{

　　　　　 color:green;/*权值为　1 ＋ 100 ＝ 101*/
　　　　}

　　　　*[id="main"]{

　　　　　　color: blue;/＊权值为0 + 10 = 10*/
　　　　}

　　　　/*#main的字体颜色为绿色。div #main的权值最大。*/

（3）若权值相等，根据声明的样式的先后顺序。无论是外部样式，还是内部样式，在后面声明的覆盖先前的。

style.css

#main p{
    color :red;
}

<head>
    <style type="text/css">
        # main p{color:blue;}
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="main">
        <p>段落文字</p>
    </div>
</body>

<!--p的字体颜色为红色。-->

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
        # main p{color:blue;}
    </style>
</head>
<body>
    <div id="main">
        <p>段落文字</p>
    </div>
</body>

<!--p的字体颜色为蓝色。-->