css选择器（一）--- 权重问题

important

权重10000（最大）

内联

style='' //权重1000（仅次于 !important）

ID选择器

#content //权重100

类、伪类、属性选择器

权重10

1.类： .content
2 伪类：同一个标签，根据其不同的种状态，有不同的样式。用冒号来表示。比如a标签
        a:link{
			/*点击之前 */
		}
		a:visited{
			/*被访问过之后 */
		}
		a:hover{
			/*鼠标悬停 */
		}
		a:active{
			/*点击链接，但是不松手的时候 */
		}

3 属性选择器：对具有给定属性或属性值的元素设置样式。

		如：选择所有具有class属性的段落p，设置其字体颜色为红色
		p[class]{color:red}
		<p class="content1">第一个段落</p>
		<p class="content2">第二个段落</p>
		<p>第三个段落</p>

标签选择器、伪元素选择器

权重1

1 标签选择器：p，div
2 伪元素选择器
    :before   表示元素最前面的部分（紧随着开始标签的后面）
    :after   表示元素最后面的部分（紧挨着结束标签的前面）
    如：
    p:before{
	    content:"会出现在元素的最前面";
	    color:red;
    }
     p:after{
	    content:"会出现在元素的最后面";
	    color:blue;
    }

注意：CSS2中伪元素选择器的before和after用的单冒号，CSS3中用的双冒号。

权重为0的选择器

通用选择器（*）

子选择器（>）

<style>
      /*选择只作为 h1 元素子元素的 strong 元素*/
	  h1>strong {
	      color: red;
	  }
</style>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻选择器（+）

选择的是单个兄弟元素

<style>
   /*选择每个div紧邻后的一个元素p*/
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

同胞选择器（~）

选择的是多个兄弟元素

<style>
   /*选择每个div紧邻后的所有元素p*/
   div~p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>red text</p>