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>