css选择器
id选择器 [#选择器名{...}]
“#”定义 “#”par id=par 不能以数字开头
class选择器（类选择器）[.选择器名{...}]
.定义 .par class=par 不能以数字开头
元素选择器（标签选择器）[选择器名{...}]
<style>
p{font-style:italic}
</style>
所有P标签都是该样式
包含选择器 [A B{...}]A B为标签，下同
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
<p>yellow text</p><!--文字是黄色的-->
</div>
div里面的p标签是红色的样式
或[.A B{...}]A是类名，B是标签
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first">
<span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
</ol>
</p>
</body>
所有在first里面的span都是红色样式
子选择器 [A>B{...}]
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。
只有div里面的p是红色样式，嵌套在div里面的table不是红色样式
或.[A>B{...}]A是类名B是标签
<style>
.first>span{
color:red;
}
</style>
<body>
<p class="first">
<span>内容为红色</span>
<ol>
<li><span>内容不是红色</span></li>
</ol>
</p>
</body>
使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。
兄弟选择器[A~B{...}]
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
只有div和p同时使用时，p内容才是红色样式
通用选择器[*{属性：属性值}]
<!--使用html中任意标签元素字体颜色全部设置为红色：-->
<style>
*{color:red;}
</style>
<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>
相邻选择器[A+B{...}]
<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
div+p{
color: red;
}
</style>
<div>
<p>not red text</p>
<p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>
只有邻div的第一个p是红色样式
分组选择器
同样的样式，可以写在一组
h1{color:red;}
h2{color:red;}
写成
h1,h2{color：red}
嵌套选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。<div class="marked"><p></p><div>
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。<p class="marked"></p>
样式表
在头部插入样式表
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表
写在头部
内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
样式在元素里使用一次
多重样式
如果同时有外部样式和内部样式
则
颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
优先级
优先级逐级增加的选择器列表：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
多重样式优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式