CSS命中目标:CSS Selector之类型选择器与后代选择器等
时间:2012-12-29 08:41来源:未知 作者:admin 点击:
次
分享到:
在前面的内容中,我们用四篇文章讲了CSS代码结构的一些基础知识: 1、根基的建立使有意义的html标记http://www.fun52.com/article.asp?id=400 2、如何为id及class类命名?http://www.fun52.com/article.a
在前面的内容中,我们用四篇文章讲了CSS代码结构的一些基础知识:
1、根基的建立 使有意义的html标记 http://www.fun52.com/article.asp?id=400
2、如何为id及class类命名? http://www.fun52.com/article.asp?id=403
3、再谈div和span! http://www.fun52.com/article.asp?id=406
4、DOCTYPE文档类型及浏览器的模式 http://www.fun52.com/article.asp?id=418
有了良好的基础只是一个开始,我们的代码是分离的,我们要为CSS样式找到目标。如果正确有效的命中目标就需要学习CSS Selector,即CSS选择器(选择符)的相关知识。
CSS的选择器有多种多样,随着CSS版本的升级,也有新的CSS选择器出来,我们的选择器功能也将会更加的强大。但我们目前的一些浏览器对某一些选择器的支持还不是很好。我们就从最基础的开始讲起吧。
类型选择器是用来定位特定的HTML类型元素,如标题h1、段落p、锚元素a、内联元素span、无序列表ul、列表项li等等。这样的选择器除了叫类型选择器以外,还有另外两个名字元素选择器与简单选择器。看下面的例子。
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
这些都是最典型的类型选择器,它的特点就在于定位非常简单而明确。但是如果文档结构比较复杂。不同部位的段落p、锚a可能是不同的样式定义,我们该如何准确的命中目标呢?我们在后面的内容将会逐一进行说明。接下来的知识也可以搞定上面的这个小问题。
后代选择器是用来定位特定元素的后代。它的语法很简单,两个选择器之间加一个空格就行了。例如上面的问题,我们作一个设置。
h1 {color:#f60;}
p {line-height:1.2em;}
a {text-decoration:underline;}
span {font-size:10px;}
li a {text-decoration:none;}
这样设置以后。在列表以外的锚会有下划线,而列表项的锚就不会带有下划线了。在前面的文章中,我们特别讲到了如何为id及class类命名,或许也存在着滥用id与class的习惯。希望精确的控制代码,但有时候是非常不必要的。我们完全可以通过选择器轻松的命中目标。看下面的例子。
#main a {color:#000;}
#sider a {color:#fff;}
第 1 2 页