css中选择器的权值

一、权值说明

在我们学完css各类选择器后，我们对他们的权值做一个比较。
权值代表一个选择器的重要程度，权值越高，选择器的优先级就越高。

选择器	权值
! important	>1000
内联样式	>1000
id选择器	100
类选择器	10
伪类选择器	10
标签选择器	1
通用选择器 *	0
继承的样式	0

权值的特点：
1.当一个选择器中，含有多个选择器时，需要将所有选择器的权值进行相加，然后比较。
权值大的优先显示。
2.权值相同，则就近原则
3. 群组选择器的权值，不相加，个算个的
4.！important直接获取最高权值
5. 选择器的相加结果，不会超过其最大数量级

二、举例

以下几个例子对选择器的权值和特点进行举例说明。

例1：

<style>
    #p1{color: #f00;} /* 100*/
	.fontcolor{color: #000;} /*10*/
</style>
<p class="fontcolor" id="p1">我是选择器的演示</p>
		<!-- 字体颜色会是 #f00 红色-->

这个p标签的字体颜色会是什么呢？
答案是红色。
第一个#p1是id选择器，权值=100；第二个.fontcolor是类选择器，权值=10；100>10,所以p标签的字体颜色是#f00 红色。

例2：

<style>
   p.bgc{background-color: #000;} /* 11*/
	.bgc{background-color: #f00;} /*10*/
</style>
<p class="bgc">我是选择器的演示</p>
		<!-- 背景色会是 #fff 黑色-->

这个p标签的背景色会是什么颜色呢？
答案是黑色。
第一个样式的选择器是标签选择器+类选择器，所以权值=11；第二个样式的选择器是类选择器，权值=10；11>10.所以背景色是黑色

例3：

<style>
      p{font-size:10px;} /* 1*/
	  p{font-size: 15px;} /*1*/
</style>
<p>我是选择器的演示</p>
		<!-- 字号大小会是 15px-->

这个p标签的字号大小会是多少呢？
答案是15px。
两个都是标签选择器，所以权值相同；但是因为就近原则，所以字号大小会是15像素。