CSS通过选择器控制HTML元素，实现对网页对象一对一、多对一、一对多的匹配 CSS选择器在CSS2.1的基础上新增了属性选择器、伪类选择器、过滤选择器。减少了对HTML类名的或ID名的依赖，避免了对HTML结构的干扰。后续博客中会讲到。 根据所或页面中元素的不同，可以将CSS选择器分为5大类：CSS基础4.1-选择器之基本选择器、组合选择器、伪类选择器、伪元素和属性选择器。其中，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。
本篇将介绍基本CSS选择器：标签选择器、类选择器、ID选择器和通配选择器
标签选择器
标签选择器直接引用HTNL标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。它可以快速、方便地控制页面标签的默认显示效果。
例：设置页面样式为：文字大小12像素，字体颜色为红色。（关于字体单位）
1
2
3
4
5
6
7<style type="text.css">
p
{
font-size: 12px;
color: red;
}
</style>.前缀开头，
随后跟一个自定义的类名。
应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签重定义class属性，然后将其属性值设置为事先定义好的类名称即可。
例1：用类样式设计段落文本效果 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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
{
font-size: 12px;
color: red;
}
.font18px {font-size: 18px;} /*定义一个类选择器*/
</style>
</head>
<body>
<p>12像素字体，红色</p>
<p class=font18px>18像素字体，红色</p> <!--适用于先定义的选择器-->
<p>12像素字体，红色</p>
</body>
</html>
例2：在对象中应用多个样式类，因为class属性可以包含多个类，因此涉及复合样式类
1 |
|
效果预览：
ID选择器
ID选择器以#开头，然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定定义id属性，然后将概述性质设置为实现定义好的ID选择器的名称即可。
例1：简单示例 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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">
#box
{
background:url(miku.jpg) center bottom; /*定义背景图像居中，底部对齐*/
height:700px; /*固定盒子高度*/
width:700px; /*固定盒子宽度*/
border:solid 2px red; /*边框样式*/
padding:100px; /*增加内边距*/
}
</style>
</head>
<body>
<div id="box">此处定义了一个盒子</div>
</body>
</html>
通配选择器
如果所有HTML元素都使用一个样式的话，这时可以使用通配选择器，其格式是固定的，使用*来表示。
例：样式：
1 |
|
效果预览图：
