CSS 选择器,就是说CSS里面所有Style的内容对哪些模块起作用,譬如如果我们简单的写:p {color: red},那么对所有的<p>都会起作用。很多时候,这么简单的用法不能满足网页设计的需求,于是很多中选择器就产生了。
1. tag选择器
这个没什么特别好说的,就如同前面说的,h1{font-size: 4em},这种一次性对所有某个tag都起作用的选择器
2. class选择器
这个可以理解为一种分类选择器。不同种类的tag可以有相同的class,那么他们的外观会一样;相同的tag可以有不同的class,他们的外观会不同。例如
.note {
font-size: .85em;
color:#294e56;
margin: 0 100px;
padding: 10px;
border: 1px solid #73afb7;
background-color: #fbef99;
}
注意那个小点。
使用的时候,可以简单的说<p class="note">, <h2 class="note">这样就OK了。
3. id选择器
id选择器主要是为了唯一的表示网页中某部分内容,一般情况下是为了和Javascript一起使用。
#wrapper {
width:680px;
margin: 0 auto;
padding: 0 20px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
}
使用的时候,可以简单的说<div id="wrapper">这样就OK了。
4. 组选择器
这个很好理解,说白了就是对一组选择器指定样式,譬如
h1, p, .copyright, #banner { color: #F1CD33; }
还一种更好玩,就是*通配所有的tag
5. 层次选择器
这个稍微复杂一些,首先你要理解HTML的层次结构。譬如下面这段HTML代码
<html>
<head>
<title>示例</title>
</head>
<body>
<h1><strong>CSS</strong>使用手册</h1>
<p>这本书讲得是<strong>CSS</strong>的......
</body>
</html>
那么html这个tag就是head的父亲或者先祖tag,也是body的父亲或者先祖。同理,body和head是html的儿子或者是后代。title只是html的后代,而不是儿子;html只是tag的先祖而不是父亲。head和body是兄弟。
有了这个基础,下面的就好理解了。
如果我们仅仅是想把h1里面的strong的内容变成红色,而其他的strong里面的我保持默认的方法。那么我就可以定义如下的选择器:
h1 strong {color: red}
当然这个可以更复杂一些,譬如:
p.intro strong {color: red} 可以使嵌于tag p并且这个p的class是intro的strong变成红色。
6. 高级选择器
这些选择器一般的情况可能不会用,而且有些浏览器可能不支持^_^
a:link a:visited a:hover a:active
p:hover div:hover (-IE6)
:before
:after
:first-child
:focus
后四种的支持度现在我还没有弄清楚,顺便再强调一下,平时我用Mac+Safari4或者是Windows+IE7(我不喜欢 Firefox是因为他的理念是用内存换速度,我不喜欢)。
h1 > strong 儿子选择器
h1 + table 兄弟选择器
a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold; } 属性选择器