CSS选择器中类型和后代选择器使用秘笈

本文向大家简单介绍一下CSS类型选择器与后代选择器的使用，在前面的内容中，我们学习了CSS代码结构的一些基础知识，如果正确有效的命中目标就需要学习CSS Selector，即CSS选择器（选择符）的相关知识。

CSS类型选择器与后代选择器

　在前面的内容中，我们用四篇文章讲了CSS代码结构的一些基础知识，有了良好的基础只是一个开始，我们的代码是分离的，我们要为CSS样式找到目标。如果正确有效的命中目标就需要学习CSS Selector，即CSS选择器（选择符）的相关知识。

CSS选择器有多种多样，随着CSS版本的升级，也有新的CSS选择器出来，我们的CSS选择器功能也将会更加的强大。但我们目前的一些浏览器对某一些选择器的支持还不是很好。我们就从最基础的开始讲起吧。

CSS类型选择器

CSS选择器中类型选择器是用来定位特定的HTML类型元素，如标题h1、段落p、锚元素a、内联元素span、无序列表ul、列表项li等等。这样的选择器除了叫类型选择器以外，还有另外两个名字元素选择器与简单选择器。看下面的例子。

ExampleSourceCode

1. h1{color:#f60;}  
2. p{line-height:1.2em;}  
3. a{text-decoration:underline;}  
4. span{font-size:10px;}  
5.  

这些都是最典型的类型选择器，它的特点就在于定位非常简单而明确。但是如果文档结构比较复杂。不同部位的段落p、锚a可能是不同的样式定义，我们该如何准确的命中目标呢？我们在后面的内容将会逐一进行说明。接下来的知识也可以搞定上面的这个小问题。

CSS后代选择器

CSS选择器中后代选择器是用来定位特定元素的后代。它的语法很简单，两个选择器之间加一个空格就行了。例如上面的问题，我们作一个设置。

ExampleSourceCode

1. h1{color:#f60;}  
2. p{line-height:1.2em;}  
3. a{text-decoration:underline;}  
4. span{font-size:10px;}  
5. lia{text-decoration:none;}  
6.  

这样设置以后。在列表以外的锚会有下划线，而列表项的锚就不会带有下划线了。在前面的文章中，我们特别讲到了如何为id及class类命名，或许也存在着滥用id与class的习惯。希望精确的控制代码，但有时候是非常不必要的。我们完全可以通过选择器轻松的命中目标。看下面的例子。

ExampleSourceCode

1. #maina{color:#000;}  
2. #sidera{color:#fff;}  
3.  
4. <dividdivid="main">
5. <ahrefahref="http://www.vevb.com/">www.vevb.com</a>
6. </div>
7. <dividdivid="sider">
8. <ahrefahref="http://www.vevb.com/">www.vevb.com</a>
9. </div>
10.  

同样的锚链接元素，我们可以定义成两种不同的色彩，我们完全没有必要为它们各指定一个id或class。我们在实际操作中会发现一个有趣的现象，很多同样的元素处于页面中，只是位置不同罢了。我们通常都能通过给他们的父元素定义一个id。然后再用后代选择器，就可以准确的命中目标了。

伪类选择器　

　  我们谈一下CSS选择器中伪类选择器pseudo-class，它们有如下构成：

ExampleSourceCode

1. a:link{color:#f00;}  
2. a:visited{color:#f60;}  
3. a:hover{color:#fc0;}  
4. a:active{color:#000;}  
5. input:focus{background:#ccc;}  
6.  

我们顺序排列了这四个伪类选择器，请你要特别注意它们的顺序，L-V-H-A！这非常重要！不遵循这样的规则，你的设置可能会失效！在这四个之中，link和visited两者只能用于链接的锚元素。也就是说只有a才能使用到它们。而hover和active、focus可以用在其它元素上面，称为动态伪类，但非常遗憾，目前不是所有的浏览器都支持，所以最好不要使用这些动态伪类，除非你有足够的把握能面对浏览器不兼容的问题。关于这方面的知识，以后在www.vevb.com中再详细的学习。