css选择器的使用详解

－、css选择器的分类：

 

 

二、常用选择器详解：

　　1、标签选择器：

　　语法：

　　　　标签名　{

　　　　　　属性：属性值;

　　　　}

　　代码示例：

　　　　h1 {

　　　　　　color: #ccc;

　　　　　　font-size: 28px;

　　　　}

 

　　2、类选择器:

　　　语法：

　　　　.类名　{

　　　　　　属性：属性值；

　　　　}

　　　代码示例：

　　　　.top {

　　　　　　margin-top:25px;

　　　　}

　　　　<div class="top"></div>

　　3、id选择器:

　　　语法：

　　　　#ID名称　{

　　　　　　属性：属性值;

　　　　}

　　　代码示例：

　　　#top {

　　　　padding-top:10px;

　　　}

　　　<div id="top"></div>

　　注意：ID属性是唯一标识。

　　4、伪类

　　　语法：

　　　元素：伪类　{

　　　　属性：属性值；

　　　}

　　　代码示例：

　　　a:link {

　　　　color:blue;

　　  }

　　5、并集选择器：

　　　语法：

　　　标签名，.类名，#ID名称　{

　　　　属性：属性值;

　　　}

　　　代码示例：

　　　p,.top,#title {

　　　　color:red;

　　　}

　　6、后代选择器：

　　　语法：

　　　p span {

　　　　　属性：属性值;

　　　}

三、通用选择器详解：

 　　语法：

　　*{

　　　属性：属性值;

　　}

四、高级选择器详解：

　　1、子选择器：

　　　　代码示例：

　　　　#nav>li {

　　　　　 padding-left: 20px;

　　　　} 

 

　　2、相邻同胞选择器：

　　　　代码示例：

　　　　h2+p {

　　　　　　font-size: 1.4em;

　　　　}

　　3、属性选择器：

　　　　代码示例：

　　　　[id="header"] {

　　　　　　background: url(branding-color.png) repeat-y left top;

　　　　}

　　　　a[rel="nofollow"] {

　　　　　　padding-right: 20px;

　　　　}

五、样式的优先级（权重）：

　　基本选择器之间：ID选择器〉类选择器〉标签选择器

　　样式表之间：　　行内样式〉内嵌样式〉外部样式

　　css样式之间： 　同一个选择器且两条相同的声明，后一条声明会覆盖前一条声明