CSS基础教程之基本选择器
CSS选择器
1、基本选择器
（1）“*”选择器：通配符
描述：将匹配所有的HTML标签，所有的标签都会改变的。
语法：*{ color:red; }
注：“*”尽量少用，因为IE6不支持。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（2）标签选择器
描述：将匹配指定的HTML标签。
语法：h1{ color:red; }
注：CSS标签选择器，与HTML标签的名称一样，但不能加尖括号。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（3）class选择器(类选择器)——类选择器是使用频率最高的
描述：给一类HTML标签加样式。这里所指的“一类”是：每个HTML标签都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标签都有。
类选择器的名称，必须以“.”开头，后限HTML标签的class属性的值。如：.box{ color:red; }
注： HTML标签的class属性的值，不能以数字开头。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">习近平心中的互联网</h1>
<p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>（4）id选择器
描述：给指定id的元素添加样式。
注：
网页中HTML标签的id属性的值，必须是唯一的。
每一个HTML标签都有一个id的公共属性。
id属性一般是给JS使用的，不是让你来加样式的。class属性只能给CSS用，不能给JS用的。
id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
#NO1{
color:blue;
background-color:#88ff99;
}
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 id="NO1">习近平心中的互联网</h1>
<p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
看透不说透
通配选择器 *{} 一般网页开头就要用到 *{margin:0;padding:0;}
8年前 添加回复 1