<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器
设置所有标签的样式
*/
p
{
border: 1px solid #8A2BE2;
}
/*ID选择器
设置指定ID 的元素样式
*/
#div1
{
background-color: antiquewhite;
}
/*Class选择器（类选择器）
设置指定Class的样式
*/
.cls
{
border: 1px solid #FF0000;
background-color: teal;
color: coral;
}
.cls1
{
font: 50px 宋体;
}
----------------------------------
/* 选择器的优先级
Css样式中 优先级 ID > Class > 标签
在同等优先级下， 最后定义的样式为准
（行内样式表优先级 > 内部样式表 = 外部样式表）
但是可以使用!important设置优先级为最高
*/
div
{
background-color: red ;
}
.cls2
{
background-color: blue;
}
#div2
{
background-color: green;
}
/* 组合选择器 */
h1, h2, h3, h4, h5
{
color: coral;
}
/*
标签+类选择器
同样的class样式作用与不同的标签中的样式相异
*/
p.cls3
{
color:green
}
span.cls3
{
color: red;
}
/*层次选择器
div 下 所有的P元素设置样式
*/
div p
{
background-color: gold;
}
</style>
</head>
<body>
<div>
我是一个层
</div>
<div id="div1">
我是一个层
</div>
<p>
我是一个段
</p>
<input type="button" name="" id="" value="按钮" class="cls cls1" />
<input type="text" name="" id="" value="eeeee" />
<textarea rows="" cols="" class="cls">
Content
</textarea>
<table border="1">
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
<tr>
<td>
aaa
</td>
<td>
aaa
</td>
</tr>
</table>
<div class="cls2" id="div2">
Hello world
</div>
<h1>标题一</h1>
<h2>标题一</h2>
<h3>标题一</h3>
<h4>标题一</h4>
<h5>标题一</h5>
<p class="cls3">
P标签
</p>
<span class="cls3">
Span标签
</span>
<div>
<p>
p标签
</p>
</div>
</body>
</html>
<!--
-->
