CSS中的选择器 - 码农教程

1、ID 选择器

（1）每个ID选择器在一个页面中只能使用一次，以作为某个元素的唯一标识符。一般情况下，ID选择器只用于页面的唯一元素，如页眉，主导航条，布局区块等。例如：This paragraph has red text. 相应的CSS代码：#hightlight{ color:#FF0000; } （2）将ID选择器与标签选择器结合适合所有h2标题：h2{ color:#333; font-size:16px; } 只适合title的h2标题：h2#title { color:#eee; } 相应的XHTML代码：

<h2>Title Of My Article</h2>
<h2 id=”title”>Title Of My Article</h2>

（3）ID选择器的使用场合对于每个ID选择器，每个页面只能有一个元素使用该样式，因此ID应该为每个页面唯一存在并仅使用一次。当一个以上的地方需要使用同一CSS规则时，不应该使用 ID选择器。

2、类选择器

（1）类选择器可以无限次的使用，因此它是应用CSS的非常灵活的方法。例如：This paragraph has red text. 相关CSS代码：.hightlight { color:#FF0000; } （2）类选择器和ID选择器的结合例如：

<ul id=”drinks”> 
	<li class=”mix”>Beer</li> 
	<li class=”mix”>Sprits</li> 
	<li class=”hot”>Cola</li> 
	<li class=”hot”>Lemonade</li> 
</ul>

相应的CSS 代码：

ul#drinks{ color:FF6600; } 
.mix { Color:#999999; } 
.hot{ Color:#333333; }

（3）运用类选择器改写基本样式例如：

p{ Color:#ff6600; } 
.bleached { Color:#ccc; }

相应的 XHTML 代码：

<p>This paragraph has red text.</p> 
<p class=”bleached”>This paragraph has red text.</p>

（4）直接将类选择器链接到元素上例如：p.bleached { color:red; } 相应的 XHTML 代码：This paragraph has red text. （5）ID选择器与类选择器的区别如果需要多次重复使用或者需要使用子类选择器，那么就选择class类选择器，如果是定义唯一的标记，比如布局，那么就用ID选择器。

3、层叠

（1）外部链接实现层叠

<link rel=”stylesheet” type=”text/css” href=”css/one.css”> 
<link rel=”stylesheet” type=”text/css” href=”css/two.css”> 
<link rel=”stylesheet” type=”text/css” href=”css/three.css”>

（2）导入样式实现层叠

@import url(“one.css”) 
@import url(“two.css”) 
@import url(“three.css”)

注意：同层次的规则，越写在下面的优先级越高。

4、分组

h1{ Font-family:隶书,宋体,楷体; Line-height: 140%; Color:#333; } 
h2{ Font-family:隶书,宋体,楷体; Line-height: 140%; Color:#333; } 
h3{ Font-family:隶书,宋体,楷体; Line-height: 140%; Color:#333;}

分组后：h1,h2.h3{ Font-family:隶书,宋体,楷体; Line-height: 140%; Color:#333;} 分组例外：h1{ Font-style:italic; }

5、继承

例如：

h1{ Color:#333; } 

<h1>This is the greatest heading <i>in the world</i></h1>

从body继承：body { Margin:10px; Font-family:隶书; Background:#000; Color:#fff; }

6、上下文选择器

例如：

h1{ Color: #ccc; } 
i{ Color:#000; }

使用上下文选择器：h1 i{ Color:#000; }

7、子类选择器

CSS代码：

.box{ color:red; } 
.box1{font-weight:bold;} 
.box2{ font-style:italic; }

XHTML代码：

<div class="box">Box</div> 
<div class="box box1">Box1</div> 
<div class="box box2">Box2</div>

8、其他选择器

（1）标签选择器

p{color:black;} 
a{text-decoration:underline;} 
h1{font-weight:bold;}

（2）后代选择器

h2 i{ color:red; } 
li a{ text-decoration:none; } 
#main h1{ Color:red; }

（3）伪类选择器

a:link{color:blue;} 
a:visited{color:green;} 
a:hover,a:active{color:red;} 
input:focus{background-color:yellow;}

（4）通用选择器

*{ Padding:0; Margin:0; }

（5）高级选择器高级选择器目前支持还不太完善，所以对于站点功能很重要的元素，应该避免使用这些高级选择器。 1）子选择器和相邻同胞选择器子选择器：

#nav > li{background:url(bg.gif) no-repeat left top;} 

<ul id="nav">
	<li>Home</li> 
	<li>Server 
		<ul> 
			<li>Development</li> 
			<li>Consultancy</li> 
		</ul> 
	</li> 
	<li>ContactUs</li> 
</ul>

相邻同胞选择器：

h1 +p{font-weight:bold;} 

<h1>Main Heading</h1> 
<p>First Paragraph</p> 
<p>Second Paragraph</p>

2）属性选择器

<strong title=”Cascading Style Sheets”>CSS</strong> 

strong[title] {border-bottom:1pxdotted #999;} 
strong[title]:hover {cursor:help;background:#ccc}

9、代码注释与结构

/*bodystyles*/ 
body { 
	Font-size:67.5%; 
}

（1）添加结构性注释

/*--------------------------------------------------
Version:1.1 
Author:andy budd 
Email:info@andybudd.com 
Website:http:www.andybudd.com 
-----------------------------------------------------*/

（2）自我提示

/* 
Use the star selector hack to give IE a different font size 
http://www.info.co.ph 
*/

（3）布局结构表格成了一种布局工具而不仅仅是显示数据的方式，块引用（blockquote）被用于添加空白而不仅仅是表示引用。我们可以使用DIV+CSS来控制布局。