css的优先级整理

一.css权重依次减弱

1）内联样式 

<p style="color: red;">css demo</p>  //在标签上加的style 优先级最高

2）id选择器 

<style type="text/css">
     	#red{
     		color: red;
     	}
     </style>
     <p id="red">css demo </p>

3）属性选择器

<style type="text/css">
	
	/* 对有id属性的div元素起作用的CSS样式 */
	p[id] {
		color: blue;
	}
	/* 对有id属性值 以demo结尾的p元素起作用的CSS样式 */
	p[id$=demo] {
		color: blue;
	}
	/* 对有id属性值包含demo的p元素起作用的CSS样式 */
	p[id*=demo] {
		color: blue;
	}
	/* 对有id属性值以demo开头的p元素起作用的CSS样式 */
	p[id^=demo] {
		color: blue;
	}
	/* 对有id属性值等于demo的p元素起作用的CSS样式 */
	p[id=demo] {
		color: yellow;
	}
</style>
<p id="demo">css demo </p>

4)类选择器

<style type="text/css">
	.demo{
		color: red;
	}
</style>
<p class="demo" >css demo </p>

5）元素选择器

<style type="text/css">
	p{
		color: red;
	}
	span{
		color: yellow;
	}
</style>
<p >css demo </p>
<span>css demo </span>

6）通用选择器

<style type="text/css">
	p *{
		color: red;
	}
	*{
		color: yellow;
	}
</style>
<p >
	<span>css demo </span>
	<p>css demo </p>
</p>
<span>css demo </span>
<div>css demo </div>