css中的选择器权重

众所周知，权重分为四种，在我们常用的从高权重到低权重分别为行内样式(内联样式)、ID选择器、class选择器、标签选择器。

但是，其中一些不常用的选择器的权重是多少呢？

还有剩下的行内样式和继承样式
其中行内样式的权重是1000，继承样式的权重是0000

叠加的选择器的权重，如下面的代码块

.top_topcontent .left li{
	float: left;
	color: #6a665d;
	margin-right: 30px;
	font-size: 12px;
	line-height: 30px;
}

上面代码块的权重是21，其中有两个class选择器，一个标签选择器
当选择器有重叠的时候，选择器的权重是叠加起来的，所以，上面代码块的权重是
.top_topcontent + .left + li = 10 + 10 + 1 = 21

那么其中又衍生出来两个问题

Q1:如果权重相同的时候，两个相同的CSS样式会如何
Q2:如果出现11个class选择器和一个id选择器的时候，那么会解析id选择器还是class选择器呢？

A1:其实实际上，并不会出现11个class选择器>id选择器的，也就是说，当11个class选择器出现和id选择器同时出现并且是二选一的时候，还是以id选择器的样式为主
A2:当两个选择器相同权重的时候，写在后面的CSS样式会覆盖前面CSS的样式，在我看来，这也是(层叠样式表)名字中的一个特性，层叠，如下代码块

<div class="top_topcontent">
	<div class="left" style="font-size:yellow">
		<ul>
			<li>逆战</li>
			<li>新闻</li>
			<li>班级</li>
			<li>新闻</li>
			<li>关于们</li>
			<li>逆战班</li>
		</ul>
	</div>
</div>

.top_topcontent .left li{
	float: left;
	margin-right: 30px;
	font-size: 16px;
	line-height: 30px;
    color: blue;
	color: red;
}

上面代码块会执行color: red;

除了上述内容，还有一个权重最高的是!important，也就是比最大的内联样式(行内样式) 的权重还要高

.top_topcontent .left li{
	float: left;
	margin-right: 30px;
	font-size: 16px;
	line-height: 30px;
    color: blue !important;
	color: red;
}

这时候浏览器解析的颜色是蓝 color: blue !important;

在最后，重点强调一下标题的问题
当11个class选择器和1个id选择器在一块时，优先解析的是id选择器，并不会出现所谓的11个class选择器大于id选择器的问题，此处代码太长，没有上传案例