常用的选择器
最常用的选择器类型是类型选择器(元素选择器)和后代选择器
类型选择器:用来寻找特定类型的元素
后代选择器:用于寻找特定元素或元素组的后代,由其他两个选择器之间的空格表示
ID选择器:用于寻找那些具有指定ID的元素
类选择器:用于寻找那些具有指定类名的元素
伪类选择器:有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表格元素,链接的状态
:link 和 :visited称为链接伪类,只能用于锚元素。:hover 、 :active 和 :focus成为动态伪类,理论上可以应用于任何元素。IE6只注意应用锚链接的:active 和 :hover 选择器,完全忽略:focus 。IE7在任何元素伤都支持:hover,但忽略:active 和 :focus.
通过把伪类元素连接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果 a:visited:hover{ color:oliver; }
通用选择器
通用选择器可能是所有选择器中最强大但最少使用的。有点类似与通配符,由一个星号表示。
为了省事,很多时候我也会直接* padding:0 ; margin:0; 看似省事,却导致解析的速度降低,css在加载时候需要将所有的标签(不管是否在页面中用到的一切标签)均初始化
示例:删除每个元素上默认的浏览器内边距和外边距:
* {
padding : 0 ;
margin : 0 ;
}
高级选择器
PS: 在对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级选择器。
子选择器。后代选择器选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素。
<!DOCTYPE html>
<html >
<head >
<title > CSS 子选择器测试</title >
<style type ="text/css" >
#nav >li {
background : url(coldplay.png) no-repeat left top ;
padding-left : 20 px ;
}
</style >
</head >
<body >
<ul id ="nav" >
<li > <a href ="/home/" > Home</a > ></li >
<li > <a href ="/service/" > Services</a > </li >
<ul >
<li > <a href ="/service/design/" > Design</a > </li >
<li > <a href ="/service/development" > Development</a > </li >
<li > <a href ="/service/consultancy" > Consultancy</a > </li >
</ul >
<li > <a href ="/contact/" > Contact Us</a > </li >
</ul >
</body >
</html >
<!DOCTYPE html>
<html >
<head >
<title > CSS 子选择器测试</title >
<style type ="text/css" >
#nav li {
background : url(coldplay.png) no-repeat left top ;
padding-left : 20 px ;
}
#nav li * {
background-image : none ;
padding-left : 0 ;
}
</style >
</head >
<body >
<ul id ="nav" >
<li > <a href ="/home/" > Home</a > ></li >
<li > <a href ="/service/" > Services</a > </li >
<ul >
<li > <a href ="/service/design/" > Design</a > </li >
<li > <a href ="/service/development" > Development</a > </li >
<li > <a href ="/service/consultancy" > Consultancy</a > </li >
</ul >
<li > <a href ="/contact/" > Contact Us</a > </li >
</ul >
</body >
</html >
相邻同胞选择器用于定位同一个父元素下某个元素之后的元素,即根据一个元素与另一个元素的相邻关系对它应用样式
<!DOCTYPE html>
<html >
<head >
<title > CSS 相邻同胞选择器测试</title >
<style type ="text/css" >
h2 + p {
font-size :1.4 em ;
font-weight : bold ;
color :#777 ;
}
</style >
</head >
<body >
<h2 > 标题1</h2 >
<p > 标题2</p >
<p > 标题3</p >
</body >
</html >
新的CSS3选择器
属性选择器:可以根据某个属性是否存在或属性的值来寻找元素
除了可以根据某个属性是否存在对元素应用样式之外,还可以根据属性值应用样式
a[rel=”nofollow”] { background: url(nofollow.gif) no-repeat right center; padding-left: 20px; }
<!DOCTYPE html>
<html >
<head >
<title > CSS 属性选择器测试</title >
<style type ="text/css" >
acronym [title] {
border-bottom : 1 px dotted #999 ;
}
acronym [title] :hover ,acronym [title] :focus {
cursor : help ;
}
</style >
</head >
<body >
<p > The term <acronym title ="self-contained" > SCUBA</acronym > is an acronym rather than an abbreviation as it is pronounced as a word.</p >
</body >
</html >
特殊性和层叠的作用
在不太复杂的样式表中,要寻找同一元素可能有两个或更多规则。CSS通过层叠的过程处理这种冲突。层叠给每个规则分配一个重要度
为了计算规则的特殊性,给每种选择器都分配一个数字值。然后将规则的每个选择器的值加在一起,计算出规则的特殊性。可惜特殊性的计算不是以10为基数的,而是采用一个更高的未指定的基数。真能确保非常特殊的选择器(比如ID选择器)不会被大量一般选择器(比如类型选择器)所超越。
选择器的特殊性分成4个成分等级:a,b,c和d
如果样式是行内样式,那么a = 1
b 等于ID选择器的种数
c 等于类,伪类和属性选择器的数量
d 等于类型选择器和伪元素选择器的数量
计划和维护样式表
css文件个数越大加载速度越慢,css个数越多加载速度越慢,因此需要平衡css文件的数量和大小
为了避免混乱,应尽量保持一般样式非常一般,特殊样式尽可能特殊,这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式,那么从更一般的样式中删除将需要覆盖的声明,并且将它显式的应用于需要它的每个元素
对文档应用样式
可以将样式放在style标签之间,从而直接在文档头上添加样式
外部样式表附加到网页上
链接 <link href="/css/basic.css" rel="stylesheet" type="text/css" />
导入 (导入样式表比链接样式表混乱) <style type="text/css"> @import url("/css/basic.css"); </style>
如何在代码中加注释
CSS注释以(/* … */)结束,这种注释称为C风格的注释
为了便于维护,最好把样式表划分为几大块。通常把最一般的规则放在最前面。包括应用于body标记的,应该由站点上所有元素继承的样式。完成一般样式后,开始处理更特殊的样式和辅助样式,然后处理布局和导航等结构性元素,与特定页面相关的组件上,最后在文档的底部处理覆盖和例外情况。