各种选择器及优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/*
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
*/
#para1
{
font-size:60px;
color:red;
}
/*
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
*/
.center
{
color:yellow;
text-align:center;
}
p.center /*指定特定的HTML元素使用class */
{
color:green;
text-align:center;
}
/*元素选择器*/
p{
color:blue;
}
/*包含选择器
包含选择器除了有 A B{...} 的形式外（A和B都是标签），
还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）
*/
.first span{
color:black;
}
</style>
</head>
<body>
<h1 id="para1" class="center">标题居中</h1>
<p class="center">段落居中。</p> <!--class>元素选择器-->
<p style="font-size:100px;color:pink;" id="para1" >内容为粉色</p> <!--style>id-->
<p id="para1" class="center" >内容为红色</p> <!--id>class-->
<p style="font-size:100px;color:green;" class="first"><span>内容为黑色</span> <!--包含选择器>style-->
</body>
</html>
选择器中有相同属性设置时的优先级顺序如下：
包含选择器>style > id > class > 元素选择器
