一，css样式规则
CSS（层叠样式表）样式规则是用来指定网页元素如何呈现的声明。每条CSS样式规则通常包括一个选择器和一组属性与值。
selector{
property:value;
property:value;
...
}
二，选择符
1,选择符
(a)标签选择符
标签选择符（也称为元素选择符）是CSS中的一种基本选择器，它通过HTML元素的标签名来选择页面中的所有相应元素。使用标签选择符，可以为页面中所有相同类型的元素应用统一的样式。
<head>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>标签选择符</h1>
</body>(b)类选择符
类选择符（Class selector）是CSS中用于选择具有特定类名的HTML元素的样式规则。与标签选择符不同，类选择符可以应用于任何类型的元素，并且可以在多个元素上重复使用，这使得它非常灵活和强大。
<style type="text/css">
.book_name{
color: bule;
}
</style>
<body>
<h1 class="book_name">一个标题</h1>
</body>
(c)id选择符
ID选择符（ID selector）是CSS中用于选择具有特定ID属性的HTML元素的样式规则。每个ID在页面中应该是唯一的，因此ID选择符通常用于选择和样式化唯一的页面元素。
<head>
<style>
#ttt{
color:yellow
}
</style>
</head>
<body>
<h1 id="ttt">一个标题2</h1>
</body>
2，复合选择符
(a)交集选择符
交集选择符（或称为组合选择符）允许你根据多个条件选择元素。交集选择符通过在两个选择器之间不添加任何空格来表示，它选择同时满足这两个条件的元素。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>"交集"选择符示例</title>
<style type="text/css">
P{
font-size:14px;
color:#00F;
text-decoration:underline;
}
p.myContent{
font-size:20pxi
text-decoration:none;
border:1px solid #C0o;
</style>
</head>
<body>
<p>1."交集"选择符示例</p >
<p class="myContent">2."交集"选择符示例</p >
<p>3."交集"选择符示例</p >
</body>
</html>(b)并集选择符
并集选择符是一种用于选择同时满足多个选择器的元素的方式。并集选择符使用逗号 , 来分隔不同的选择器。当使用并集选择符时，所有被逗号分隔的选择器都会应用相同的样式规则。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>"并集"选择符示例</title>
<style type="text/css">
h1,h2,h3{
color: purple;
}
h2. special,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>示例文字 h1</h1>
<h2 class="special">示例文字h2</h2>
<h3>示例文字h3</h3>
<h4 id="one">示例文字h4</h4>
</body>
</html>(c)后代选择符
后代选择符用于选择一个元素内部的所有匹配的后代元素。后代选择符使用空格字符来表示。后代选择符能够简化代码，实现大范围的样式控制。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>"后代"选择符示例</title>
<style type="text/css">
p span{
color:red;
}
span{
color:blue;
}
</style>
</head>
<body>
<p>嵌套使用<span>css 标签</span>的方法</p >
嵌套之外的<span>标签</span>不生效
</body>
</html>