CSS选择器深入探讨（细节东西）（转）

细节决定成败，越是注重细节方面的东西，那么你完成的作品就越完美。

1、父子选择器(看作组合比较好理解)

• 父子选择器可以有多级（但是在实际开发中最后不好超过三层)

　　如：html中文件片段：

<!--父子选择器-->
<span id="id1">这是一个<span>非常<a href="#">汇总的世界</a>重要</span>的新闻</span>

css文件：

#id1 span{
color:red;
font-style:italic;
}

#id1 span a:hover{
color:green;
font-size:16px;
text-decoration:none;
}

• 父子选择器有严格的层级关系。
• 父子选择器不局限于什么类型选择器

比如这样写：#id span a 和.s1 #di span 和 div #id .s2 都是可以的。

2、一个元素可以同时有id选择器和类选择器

如：

<span class="style1" id="id_news1">新闻一</span>

.style1{
font-size:20px;
background-color:pink;
color:black;
}

/*给新闻一指定id*/

#id_news1{
font-style:italic;
color:red;
}

3、一个元素最多有一个id选择器，但是可以有多个类选择器

因为id是唯一性的，所以不能出现多个id。

代码片段：

<span class="style1 news3">新闻三</span>

.style1{
font-size:20px;
background-color:pink; /*冲突*/
color:black;
}

/*新闻三指定一个类选择器*/

.news3{
text-decoration:underline;
font-style:italic;
color:yellow;
background-color:silver;   /*冲突以.new3为准*/
}

注意：但2个类选择器发生冲突的时候，则以写在css文件中的后面的那个选择器为准！

4、我们可以把某个css文件中的选择器公共部分，可以独立写一份

如css有 .a，.b， .c 3个类选择器，但是他们有公共的height，float，margin属性，我们就可以这样写：

.a , .b, .c{  /*(注意：一定要加以逗号区分开来，少了逗号就没有效果了)*/

height: 196px;

float:left;

margin: 5px 0 0 6px;

}

 

注意这些细节方面，我相信在后面的DIV+CSS内容更容易理解与掌握。