类选择器
class 属性规定元素的类名（classname）
类选择器以一个点号显示
.center {text-align: center}
class类似一个标记。
“p.类名”表示标记了该类的p标签的样式，这个类的样式只能被p使用。即
p class=”标记名”
而”.类名”表示元素也可以基于它们的类而被选择，所有标签都可以包含这个类
*.important {color:red;}
.important {color:red;}
以上两者相等
一个标签可以包含多个类，包含多个类时用空格隔开，不分先后
当两个类有各自的样式，可以有同时包含两个类时才出现的样式
.important.warning {background:silver;}
<!--实例-->
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
<!--元素基于它们的类而被选择-->
p.try1 {
color:blue;
}
<!--所有元素都可使用-->
.try2 {
text-align:center;
}
</style>
</head>
<body>
<p>这是单独的段落</p>
<p class="try1 try2">这是在"class=try1 try2"的段落</p>
<h1 class="try2">这是标题，class=try2</h1>
</body>
</html>
<!--两个标记同时存在时的特殊样式-->
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
.s1{
color:red;
}
.s2{
font-size:20px;
}
.s1.s2{
font-style:italic;
}
</style>
</head>
<body>
<p class="s1"> 段落s1</p>
<p class="s2"> 段落s2</p>
<p class="s1 s2"> 段落s1 s2 </p>
</body>
</html>
class 也可被用作派生选择器：
<style type="text/css">
.s1 h1 {
font-size:10px;
}
.s1 h2 {
background: #666;
}
</style>ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。例如：
#red {color:red;}
#green {color:green;}
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
ID区分大小写
即使被标注为特定ID的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
例如：
<style type="text/css">
#s h2{
color:red;
}
#s h1{
color:blue;
}
</style><html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
#red {
color:red;
}
</style>
</head>
<body>
<p id="red">这是ID=red的段落</p>
<p>这是普通段落</p>
</body>
</html>
伪元素选择器
a:link 正常样式
a:hover 鼠标放上的样式
a:active 鼠标按下时的样式
a:visited 访问过的样式
派生选择器
后代选择器
li strong {
font-style: italic;
font-weight: normal;
}以上的代码表示在列表（li）中的strong标记所具有的样式。当strong单独使用时不具有以上样式。
类似于
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
li strong {
font-style: italic;
font-weight: normal;
}
</style>
</head>
<body>
<strong>This is a normal Strong</strong>
<ul>
<li><strong>This is a Strong in li</strong></li>
</ul>
</body>
</html>
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
</style>
</head>
<body>
<strong>这是普通的strong</strong>
<h2>这是普通的h2</h2>
<h2><strong>这是h2中的strong</strong></h2>
</body>
</html>
子元素选择器
h1 > strong {color:red;}
只将h1下一层的strong使用该样式。”>”两端可以没有空格
与后代选择器的区别：
个人认为可以将所有标签看成一个树结构
后代选择器的范围包含孩子和孙子节点。
子元素选择器的范围只包含孩子节点。
<html>
<head>
<title>网页标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta http-equiv="content-type" content="type/html;charset=htf-8"/>
<style type="text/css">
h1 > strong {
color:red;
}
</style>
</head>
<body>
<h1>这是<strong>第一个</strong></h1>
<h1>这是<p><strong>第二个</strong></p>strong</h1>
</body>
</html>
相邻兄弟选择器
h1+p{clolr:blue;}
二者有相同父元素则称为兄弟。
紧贴在h1后的p，并且h1和p具有相同父节点。则使用该样式
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
Tips
HTML div标签
可定义文档中的分区或节（division/section）,把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
