1. 通配符选择器
1) 概念
选择所有元素
2) 语法
* {
属性名:属性值;
... ...
}
3) 举例
* {
margin: 0px;
padding: 0px;
}
让所有元素的外边距和内边距都默认为0.
4) margin 补充
① margin: top right bottom left;
从上外边距 (top) 开始围着元素顺时针旋转的
② 如果为外边距指定了 3 个值
则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。
③ 如果给定了两个值
第 4 个值会从第 2 个值复制得到，
第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。
④如果只给定一个值
那么其他 3 个外边距都由这个值（上外边距）复制得到。
2. 父子选择器
1) 语法
父选择器名 子选择器名 {
属性名: 属性值;
......
}
/* 可以有多级 */
爷爷 父亲 孩子 {
... ...
}
2) 示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*父子选择器*/
tr td {
font-size: 30px;
font-style: italic;
color: red;
}
#spanId span {
color: green;
background: silver;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
<span id="spanId">
我是<span>周杰伦</span>.
</span>
</body>
</html>
3. 选择器的深入
3.1 被多个选择器选择
id > class > element > 通配符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
#spanId {
font-size: 50px;
color: red;
}
.spanClass {
font-size: 30px;
color: green;
}
span {
font-size: 10px;
color: gray;
}
* {
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<span id="spanId" class="spanClass">新闻一</span> <br/>
<span class="spanClass">新闻二</span><br/>
<span>新闻三</span>
<a href="#">我是超链接</a>
</body>
</html>
3.2 一个元素拥有的选择器的限制
① id选择器 最多有一个
② class选择器 可以有多个
<span id="spanId">
<span class="spanClass1 spanClass2">
3.3 使用多个class选择器
1) 语法
<span class="spanClass1 spanClass2">
① 引入多个时, 值用空格隔离
② 渲染的顺序 以css文件中类选择器 的顺序为准
即, 属性冲突时, 后出现的会覆盖先出现的
2) 举例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
.styCls1 {
font-size: 30px;
color: red;
font-weight: bold;
}
.styCls2 {
color: silver;
}
</style>
</head>
<body>
<span class="styCls1 styCls2">
我是张三, 你是李四吗?
</span>
<br/>
<span class="styCls2 styCls1">
对, 我是李四. 有什么事吗?
</span>
</body>
</html>
3.4 选择器分组
1) 概念
为多个选择器同时设置规则
2) 语法
选择器1,选择器2,选择器3 {
...
}
3) 举例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css4.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
#id,.spanCls,span {
font-size: 32px;
font-weight: bold;
}
#spanId {
color: red;
}
.spanCls {
color: green;
}
span {
color: blue;
}
</style>
</head>
<body>
<span id="spanId">
我是张三, 你是李四吗?
</span>
<br/>
<span class="spanCls">
对, 我是李四. 有什么事吗?
</span>
<br/>
<span>
可以借点钱吗?
</span>
</body>
</html>