css选择器的权重问题

选择器权重的排行：div < class < id < javascript

1. 标签选择器（div）和类选择器（.）进行比较；

**css代码**
<style type="text/css">
		/*类选择器*/
		.wrapperClass{
			background-color: green;
		}
		/*标签选择器*/
		div{
			background-color: red;
		}
	</style>
	html代码
	<div class="wrapperClass" id="wrapperId" style="width:100px;height:100px;"></div>

效果图

总结：从上面代码中可以看出：（标签选择器）div < （类选择器）class，这和我们css代码放置的位置无关。

2. 类选择器（.class）与ID选择器（#id名）

css代码：
<style type="text/css">
		/*ID选择器*/
		#wrapperId{
			background-color: green;
		}
		/*类选择器*/
		.wrapperClass{
			background-color: red;
		}
	</style>
	html代码：
	<div class="wrapperClass" id="wrapperId" style="width:100px;height:100px;"></div>

效果图：

总结：从上面代码中可以看出： （类选择器）class <（ID择器）id ，这和我们css代码放置的位置无关。

3. JavaScript 和id选择器的比较

css代码：
	<style type="text/css">
			/*id选择器*/
			#wrapperId{
				background-color: red;
			}
		</style>
	html代码：
		<div class="wrapperClass" id="wrapperId" style="width:100px;height:100px;"></div>
	javaScript代码：
		<script type="text/javascript">
			let divBox = document.getElementsByTagName('div')[0];
			divBox.style.backgroundColor = 'green';
		</script>

效果图：

总结：从上面代码中可以看出： （（ID择器）id < javaScript，这和我们css代码放置的位置无关。