每一个CSS样式规则都由选择器(selector)和声明块(declaration)组成。选择器告诉浏览器在HTML文件中有哪些元素受影响,而声明块则说明元素受怎样的影响。声明块由一条或多条声明组成,期间用“;”分号隔开,外层用“{}”花括号包裹。单条声明由属性(property name)和值(property value)组成。
从之前的分析,我们不难看出,要学习CSS,选择器是第一道门槛。本书将采用表格与图片示例相结合的方式来讲述这一部分的知识。
常见的选择器
下面的表格中列出了常见的8种选择器,大多数的CSS选择器都有着和下表中示例类似的“长相”。
选择器 | 选择对象 | 示例 |
通配选择器(Universal selector) | 任何类型的元素 | * {margin:0;} |
类型选择器(Type selectors) | HTML元素,如a、p、div | h2 {color:#36C;} |
包含选择器(Descendant selectors) | 所有被外层元素包含的内层元素 | table td {font-size:14px;} |
子选择器(Child selectors) IE 6及以下版本不支持 | 父元素的子元素,而不是所有的后代 | body>p {background-color:#36C;} |
类选择器(Class selectors) | 指定的类(Class) | .header {background-color:#36C;} |
Id选择器(ID selectors) | 指定的Id | #header {background-color:#36C;} |
属性选择器(Attribute selectors) IE 6及以下版本不支持 | 只论属性,不管值 | a[rel] |
x的属性值等于y | a[rel="abc"] | |
x的属性中有y | e[foo~="warning"] | |
x的属性以y开头,连字符为分割 | e[lang|="en"] | |
伪选择器(Pseudo selectors) | 伪类(Pseudo-classes)、伪元素(Pseudo-elements) | a:visited {} |
选择器释疑
包含选择器和子代选择器有什么不同?
答:两者的影响能力不同。包含选择器作用于父元素的所有后代(子、孙、曾孙),而子代选择器仅作用于子代。不能理解父、子代关系?以下面的代码为例,可做出如所示的树状图。
上图中第二层的两个p元素和div元素都是body元素的子代,第三层的p元素是第二次div的子代,第二层的p、div和第三层的p都是body的后代;同理有第三层的p也是第二层div的后代。 |
<body>
<p>abc</p>
<div class="test">
<p>def</p>
</div>
<p>ghi</p>
</body>
选择器 | CSS代码 | 效果 |
包含选择器 | body p { font-weight: bold; } | abc def ghi |
子代选择器 | body>p { font-weight: bold; } | abc def ghi |
在讲解了文档的树状图之后,我们再来接触一个新的概念——继承(inheritance)。继承是指CSS允许样式在应用于某一元素的同时,作用于该元素的后代元素。我们形象的说这些子元素继承了父元素的这些属性。下面我们举一个简单的例子:
HTML代码:<h1>这是一个<em>继承</em>示例</h1>
CSS代码:h1 {
color:#00F;
}
显示效果:
不难发现,em元素继承了h1元素的蓝色字体这一属性。值得注意的是:并非所有属性都能继承!一般地,边框类属性(边界、补白、边框、背景)都不能被继承。当然,继承还受优先级规则等的约束(下一节会讲述此内容)。
属性选择器的使用示例
属性选择器是在CSS2.1中出现的,它允许设计者选择带有某些属性的元素,从而更加准确的对页面呈现进行控制。下面的表格中列出了4种类型的属性选择器的使用示例:
类型 | 代码 | 选择内容 | 效果 |
只论属性,不管值 | h1[title] { color: blue; } | 带有title属性的h1元素。 |
|
x的属性值等于y | h1[title=abc] { color: blue; } | title属性值为abc的h1元素。 |
|
x的属性以y开头,连字符为分割 | a[rel~="copyright"] { color: red; } | rel值中有copyright,且与其他值用空格隔开的a元素。 |
|
x的属性以y开头,连字符为分割 | *[lang|="cn"] { color : red } | lang属性的值以cn开头,属性之间以“-”为分割。 | 所有lang属性为"cn"、 "cn-zh"一类的元素其颜色均变红。 |
表:属性选择器的使用示例
伪选择器都有哪些?
伪选择器在一定程度上把人们从一些js脚本中解放了出来,我们可以使用伪选择器来添加一些特殊的效果。正如在前面所说的那样,伪选择器分为了伪类选择器和伪元素选择器两种。下面列出了在CSS 1和CSS 2中定义的一些伪选择器:
选择器 | 选择对象 | 特殊 |
:first-child | 父元素的第一个子元素 |
|
:link | 未被访问过的链接 | 1. 这两个选择器专门用于a元素 2. 有时客户端程序会将访问过的链接按:link呈现 |
:visited | 已被访问过的链接 | |
:hover | 用户指向该元素,但为点击 | 这三个选择器是通用的 用于a元素时,:hover必须置于:link和:visited之后;:active必须放在:hover之后 |
:active | 被激活的元素,如用户点击该元素 | |
:focus | 拥有键盘输入焦点的元素 | |
:lang | 有lang属性的元素 | html:lang(fr-ca) { quotes: ‘« ‘ ‘ »’ } |
伪类选择器
使用伪类选择器可以DIY超链接的样式,也可以制作自己的图片按钮。
a:link{color:#FF0000} /* 未访问的链接 */
a:visited{color:#00FF00} /* 已访问的链接 */
a:hover{color:#FF00FF} /* 鼠标移动到链接上 */
a:active{color:#0000FF} /* 选定的链接 */
自定义链接样式
#btn {
display:block;
width:82px;
height:30px;
background:url(images/submit.png);
}
#btn:hover {background-position:-91px 0;}
#btn:active {background-position:-182px 0;}
DIY图片按钮的CSS代码
在需要图片按钮的地方插入“<span id="btn" onclick=" "></span>”即可。
选择器 | 选择对象 | 说明 |
:first-line | p元素(段落)的第一行 | 可以使用<P:first-line></P:first-line>来标明希望应用:first-line规则的内容,不添加则会根据字数多少来确定第一行。 通过:first-line和:first-letter的组合可实现如下的效果:
|
:first-letter | 块级元素第一行的第一个字 | |
:before | 在元素的内容前面插入新内容 | |
:after | 在元素的内容之后插入新内容 |
伪元素选择器
一位卓越的小伙伴——CSS 3中的伪选择器
在CSS 3中定义了一些新的、方便的伪选择器,让我们能够更加方便的控制页面的性状。这些新的伪选择器包括:target、:enabled、:disabled、:checked、:root、:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty、:not。鉴于当前支持CSS 3的浏览器并不多,本书将不会讲解全部的新伪选择器。
优先级
不同的选择器的优先级是不同的,处于高优先级的选择器相比低优先级的选择器而言,能够产生更大的影响。
优先级计算
在CSS中,优先级由A、B、C、D四个独立因子加权组成。根据A、B、C、D的数量,我们不难计算出选择器的优先级特性。
影响因子名称 | 计算方法 |
A | 在HTML元素中使用style属性定义样式则记A为1,其余记为0。 |
B | 等于ID属性的个数。例如#main #container{}的B为2。 |
C | 等于类属性与伪类属性之和。例如ul ol li.red {}的C为1。 |
D | 等于元素名称个数与伪元素属性之和。例如p:first-line{}的D为2。 |
表:优先级的计算方法
优先级法则
1. 选择器都有一个权值,权值越大越优先;
2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
3. “!important”声明的访客规则>“!important”声明的开发者规则(!important)>普通的开发者规则>普通的访客规则>浏览器预置规则;
4. 继承的CSS 样式不如后来指定的CSS 样式(例如#main {background-color:#CCC;}#main p {background:#00F}最终p元素的背景色为蓝色);
5. 在同一组属性设置中标有“!important”规则的优先级最大(但IE6不支持!important声明);
继承法则和优先级法则构成了CSS的层叠(cascading)规则。
简洁之美——分组选择器
“学术之美在于简洁”,简洁的代码不仅易于维护,也能减少在内容传输过程当中的流量消耗。在CSS中,我们也应该将追求代码的简洁作为一项奋斗的目标。试着构想一个情境:h2元素和p元素都要被设置为灰色的文本,一般情况下,我们可以写如下的代码:
h2 {
color:#CCC;
}
p {
color:#CCC;
}
毫无疑问,这段代码能够实现我们的目标,但是这种含有明显重复片段的代码是不够简洁的。若要在CSS中实现这种简洁之美,分组选择器(grouping)是一个不错的选择。我们可以将多个元素共同享有的属性使用以逗号“,”隔开的分组选择器来定义,我们可以将上面的代码改写为:
h2, p {
color:#CCC;
}
两种写法的作用效果完全相同。
重要补充:元素分类
在开启下一章之前,我们有必要讲述关于元素的一种重要分类方法。这种分类方法,将元素分为了块级元素(block-level elements)和内联元素(inline-level elements)两类。
块级元素大体上包括了段落p、标题h1~h6、列表ol/ul、表格table、层div和body。从显示效果上看,块级元素会从新的一行开始,并且其后的元素也会从新的一行开始。
内联元素比较典型的是链接a、强调em、span。我们可以将不是块级元素的元素称为内联元素。
练习题
1.计算优先级,填写下面的表格
规则 | A | B | C | D | 权值 |
* {} | 0 | 0 | 0 | 0 | 0,0,0,0 |
li {} | 0 | 0 | 0 | 1 | 0,0,0,1 |
li:first-line {} | 0 | 0 | 0 | 2 | 0,0,0,2 |
ulli {} | 0 | 0 | 0 | 2 | 0,0,0,2 |
ulol+li {} | 0 | 0 | 0 | 3 | 0,0,0,3 |
h1 + *[rel=up]{} | 0 | 0 | 1 | 1 | 0,0,1,1 |
ulolli.red {} | 0 | 0 | 1 | 3 | 0,0,1,3 |
li.red.level {} | 0 | 0 | 2 | 1 | 0,0,2,1 |
#x34y {} | 0 | 1 | 0 | 0 | 0,1,0,0 |
<pID=x97zstyle="color:green"> | 1 | 0 | 0 | 0 | 1,0,0,0 |
以选择器为主题的内容就介绍到这,如果您希望了解更多的内容,我建议您访问以下的网页:
W3.org关于选择器部分的定义:http://www.w3.org/TR/CSS21/selector.html
W3.org关于优先级的计算:http://www.w3.org/TR/CSS21/cascade.html