转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126558787
本文出自【赵彦军的博客】
选择器格式
选择器：{
样式；
}
标签选择器
h1 {
color : red;
font-weight : normal;
};
举例：对所有 P 标签做选择，字体颜色为 red
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>星期一</p>
<p>星期二</p>
</body>
</html>
效果如下：
id 选择器
语法格式 ：#id { }
举例说明：
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
#one{
color: blue;
}
</style>
</head>
<body>
<p id="one">星期一</p>
<p>星期二</p>
</body>
效果如下：
类选择器
class 属性定义了元素的类名
class 和 id 有什么区别？
- id 不能重复，类似于身份证号
- class 可以重复，类型于班级
语法：
.类选择器名称{
css样式代码；
}
注意：
1.英文圆点开头
2.类选择器名称可以任意起名（但不要中文名）
举例说明：
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red{
color: blue;
}
</style>
</head>
<body>
<p class="red">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>
</body>
效果如下：
多 class 场景
一个标签可以指定多个 class 属性，多个 class 属性用空格符分割。
<p class="red blue">星期一</p>
举例：
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.red{
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p class="red blue">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>
</body>
效果如下：
通配选择器
语法：*{}
含义：页面的所有元素都选中
举例：
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
*{
color: coral;
}
</style>
</head>
<body>
<p>星期一</p>
<p>星期二</p>
<p>星期三</p>
</body>
效果图：
版权声明：本文为zhaoyanjun6原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。