正如前面看到的，除了内联样式之外，定义CSS样式的语法总遵守如下格式：
Selector{
property1: value1;
property2: value2;
}
上面语法格式可分为两个部分。
➢ Selector（选择器）：选择器决定该样式定义对哪些元素起作用。
➢ {property1: value1;property2:value2}（属性定义）：属性定义部分决定这些样式起怎样的作用（字体、颜色、布局等）。
从上面介绍不难看出，学习CSS大致需要掌握两个部分内容：掌握选择器的定义方法；掌握各种CSS属性定义。
元素选择器
元素选择器是最简单的选择器，其语法格式如下：
E { ... }
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 元素选择器 </title>
<style type="text/css">
/* 定义对div元素起作用的CSS样式 */
div{
background-color: grey;
font: italic normal bold 14pt normal 楷体_GB2312;
}
/* 定义对p元素起作用的CSS样式 */
p{
background-color: #444;
color:#fff;
font: normal small-caps bold 20pt normal 宋体;
}
</style>
</head>
<body>
<div>div内的文字</div>
<p>p内的文字</p>
</body>
</html>
属性选择器
从广义角度来看，元素选择器其实是属性选择器的特例。属性选择器一共有如下几种语法格式。
➢ E { ... }：指定该CSS样式对所有E元素起作用。
➢ E[attr] { ... }：指定该CSS样式对具有attr属性的E元素起作用。
➢ E[attr=value] { ... }：指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
➢ E[att^="value"] { ...... }：指定该CSS样式对所有包含attr属性，且attr属性的值为以value开头的字符串的E元素起作用。
➢ E[att$="value "] { ...... }：指定该CSS样式对所有包含attr属性，且attr属性的值为以value结尾的字符串的E元素起作用。
➢ E[att*="value"] { ...... }：指定该CSS样式对所有包含attr属性，且attr属性的值为包含value的字符串的E元素起作用。
上面这几个选择器匹配规则越严格优先级越高。例如，对于包含abc属性的<div.../>元素，如果其属性值为xyz，则div[abc=xyz]选择器定义的CSS样式会覆盖div[abc]定义的CSS样式，如果div[abc=xyz]选择器定义的CSS样式中没有定义的属性，而div[abc]选择器定义的CSS属性依然会作用于包含abc属性值为xyz的<div.../>元素。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 属性选择器 </title>
<style type="text/css">
/* 对所有div元素都起作用的CSS样式 */
div {
width:300px;
height:30px;
background-color:#eee;
border:1px solid black;
padding:10px;
}
/* 对有id属性的div元素起作用的CSS样式 */
div[id] {
background-color:#aaa;
}
/* 对有id属性值包含xx的div元素起作用的CSS样式 */
div[id*=xx] {
background-color:#999;
}
/* 对有id属性值以xx开头的div元素起作用的CSS样式 */
div[id^=xx] {
background-color:#555;
color:#fff;
}
/* 对有id属性值等于xx的div元素起作用的CSS样式 */
div[id=xx] {
background-color:#111;
color:#fff;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx子字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>
类选择器
class选择器指定CSS样式对具有指定class属性的元素起作用。class选择器的语法格式如下：
[E].classValue { ...} /*其中E是有效的HTML元素
指定该CSS定义对class属性值为classValue的E元素起作用。此处的E可以省略，如果省略E，则指定该CSS对所有的class属性为classValue的元素都起作用。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>class选择器测试</title>
<style type="text/css">
/* 对所有class为myclass的元素都起作用的CSS样式 */
.myclass {
width:240px;
height:40px;
background-color:#FF0000;
}
/* 对class为myclass的div元素起作用的CSS样式 */
div.myclass {
border:2px dotted black;
background-color:#0000FF;
}
</style>
</head>
<body>
<div class="myclass">class属性为myclass的div元素</div>
<p class="myclass">class属性为myclass的p元素</p>
</body>
</html>
ID选择器
ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式如下：
#idValue { ... }
上面语法指定该CSS样式对id为idValue的HTML元素起作用。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>ID选择器</title>
<style type="text/css">
/* 对所有div元素都起作用的CSS样式 */
div {
width:200px;
height:30px;
background-color:#ddd;
padding:3px;
}
/* 对id为xx的元素起作用的CSS样式 */
#xx {
border:2px dotted black;
background-color:#888;
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>
提示
定义仅对指定元素起作用的ID选择器的语法格式如下：
E#idValue {...} /*其中E是有效的HTML元素*/
该语法指定该CSS样式对id为idValue的E元素起作用。
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。