20, CSS 定义选择器

1. ID 与类

2. 层叠

3. 分组

4. 继承

5. 上下文选择器

6. 子类选择器

7. 其他选择器

8. 结构与注释

20.1 ID 与类

选择器是用于控制页面设计的样式.即 ID 选择器何类选择器.

一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简

单的认为是一个代替另一个.这种认知是及其错误的.

(1). 应用 ID

每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只

用于页面的唯一元素,如页眉,主导航条 , 布局区块等.

示例:<p id=”hightlight”>This paragraph has red text.</p>

相应的 CSS 代码:

#hightlight{

color:#FFFFFF;

}

(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 应该为每个页面唯一存

在并仅使用一次的元素不保留,

(4). 避免使用  ID 的场合

当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.

(5). 应用类

类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.

<p class=”hightlight”>his paragraph has red text.</p>

相关 CSS 代码:

.hightlight {

color:FFFFFF;

}

(6). 结合多个类和  ID

范例:

<ul id=”drinks”>

<li class=”mix”>Beer</li>

<li class=”mix”>Spirtis</li>

<li class=”hot”>Cola</li>

<li class=”hot”>Lemonade</li>

</ul>

相应的 CSS 代码:

ul#drinks {

color:FF6600;

}

.mix {

Color:#999999;

}

.hot {

Color:#333333;

}

(7). 利用类改写基本样式: : : :

p{

Color:#ff6600;

}

.bleached {

Color:#ccc;

}

相应的 XHTML 代码:

<p>This paragraph has red text.</p>

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

(8). 直接将类链接到元素上

p.bleached {

color:red;

}

相应的 XHTML 代码:

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

(9). 避免 , , , , 适合

对于 class,如果多次重复使用或者使用子类选择器，那么就选择 class，如果是定义

唯一性的标记，比如布局，那么用 id。

2 20.2  层叠

(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”)

注意点:必须牢记一个规则,越晚给的规则越重要.

3 20.3  分组

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;

}

4 20.4  继承

h1 {

Color:#333;

}

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

从 BODY 继承

Body {

Margin:10px;

Font-family:隶书;

Background:#000;

Color:#fff;

} } } }

5 20.5  上下文选择器

h1{

Color: #ccc;

}

i {

Color:#000;

}

/*使用上下文选择器*/

h1 I {

Color:#000;

}

6 20.6  子类选择器

.box {

color:red;

}

.box1 {

font-weight:bold;

}

.box2 {

font-style:italic;

}

<div class="box">Box</div>

<div class="box box1">Box1</div>

<div class="box box2">Box2</div>

7 20.7  其他选择器

(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>Contact Us</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: 1px dotted #999;}

strong[title]:hover {cursor:help;background:#ccc}

8 20.8  代码注释与结构

/*body styles*/

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 IEa different font size

http://www.info.co.ph

*/

布局结构：使用有意义的标记。

表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加

空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我

们可以使用 DIV+CSS 来控制布局.

11应用 ID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#title{
		color: red;
	}

</style>
</head>

<body>

<p id="title">定义选择器</p>
<p id="title">定义选择器</p>

</body>
</html>

　　21 ID 与选择器结合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p#title{
		color:blue;
	}
h2#title{
		color:red;
	}

</style>
</head>

<body>

<h2> ID 与选择器结合</h2>
<h2 id="title"> 柳志军同学</h2>
<p id="title"> 柳志军同学</p>

</body>
</html>

　　22 class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p.title{
		color:blue;
	}
h2.title{
		color:red;
	}

</style>
</head>

<body>

<h2> ID 与选择器结合</h2>
<h2 class="title"> 柳志军同学</h2>
<p class="title"> 柳志军同学</p>

</body>
</html>

　　23 class应用类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.php{
		color:red;
	}

</style>
</head>

<body>

<p class="php"> 柳志军同学</p>
<p class="php"> 柳志军同学</p>
<p class="php"> 柳志军同学</p>
<p class="php"> 柳志军同学</p>

</body>
</html>

　　24 class应用类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#drinks{
		line-height: 200%;
		color: red;
	}
	.mix{
		font-size: 14px;
	}
	.hot{
		font-size: 20px;
	}

</style>
</head>

<body>

<ul id="drinks">
<li class="mix"> 啤酒</li>
<li class="mix"> 可乐</li>
<li class="hot"> 红茶</li>
<li class="hot"> 绿茶</li>
</ul>
</body>
</html>

　　25 上下文选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
h1 i{
		color:green;
	}
h1#sina i{
		color:yellow;
	}
h1#baidu i{
		color:blue;
	}
</style>
</head>

<body>
<h1>上下文选择器<i>部分</i>按时打算</h1>
<h1 id="sina">上下文选择器<i>部分</i>按时打算</h1>
<h1 id="baidu">上下文选择器<i>部分</i>按时打算</h1>
</ul>
</body>
</html>

　　26 子类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子类选择器</title>
<style type="text/css">
	div.box{
		color:red;
	}
		div.box1{
		font-weight: bold;
	}
	div.box2{
		font-style: italic;
	}
		div.box3{
		font-size: 30px;
	}
</style>
</head>

<body>
<div class="box">子类选择器</div>
<div class="box box1 ">子类选择器</div>
<div class="box box2 box3">子类选择器</div>
</ul>
</body>
</html>

　　27高级选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子类选择器</title>
<style type="text/css">/*下面是正文*/
	ul#nav{
		list-style-type: none;
	}
	ul#nav li{
		background: url(images/7.png) no-repeat left center;padding-left: 45px;
	}
</style>
</head>

<body>
/*下面是正文*/
<ul id="nav">
	<li>高级选择器</li>
	<li>高级选择器</li>
	<li>高级选择器</li>
</ul>
</body>
</html>