标签选择器
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 标签选择器,选择指定标签进行样式设置 */
p{
color: #aa55ff;
}
h1{
color: #aa55ff;
}
</style>
</head>
<body>
<p>狂欢之椅</p>
<p>p2</p>
<h1>我要玩第五人格</h1>
</body>
</html>
id选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.op{
color: #ffc4ff;
}
/* 同样的选择器,后面的样式会盖住前面的样式 */
.oa{
background-color:#a2e2ff ;
}
/* 如果选择器多个组合在一起,中间没有空格,代表并且的意思 */
.op.oa{
font-size: 50px;
}
.ob{
color: aquamarine;
font-size: 70px;
/* id选择器,是标签上定义的属性,id唯一 */
/* 命名规则,以数字,字母,-和_构成,不能以数字开头,不能包含特殊字符 */
#p{
font-size: 80px;
}
</style>
</head>
<body>
<p class="op oa" id="p">狂欢之椅</p>
<p class="op">p2</p>
<h1 class="ob">我要玩第五人格</h1>
</body>
</html>
类选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 标签选择器,选择指定标签进行样式设置 */
/* p{
color: #aa55ff;
}
h1{
color: #aa55ff;
} */
/* 类选择器,又称为class选择器 通过标签上class名找到满足条件的标签
不同类型标签可以提取公共样式*/
.op{
color: #ffc4ff;
}
/* 同样的选择器,后面的样式会盖住前面的样式 */
.oa{
background-color:#a2e2ff ;
}
/* 如果选择器多个组合在一起,中间没有空格,代表并且的意思 */
.op.oa{
font-size: 50px;
}
.ob{
color: aquamarine;
font-size: 70px;
}
</style>
</head>
<body>
<p class="op oa">狂欢之椅</p>
<p class="op">p2</p>
<h1 class="ob">我要玩第五人格</h1>
</body>
</html>
选择器的优先级
id>标签
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 标签选择器,选择指定标签进行样式设置 */
p{
color: #aa55ff;
}
h1{
color: #aa55ff;
}
/* 类选择器,又称为class选择器 通过标签上class名找到满足条件的标签
不同类型标签可以提取公共样式*/
.op{
color: #ffc4ff;
}
/* 同样的选择器,后面的样式会盖住前面的样式 */
.oa{
background-color:#a2e2ff ;
}
/* 如果选择器多个组合在一起,中间没有空格,代表并且的意思 */
.op.oa{
font-size: 50px;
}
.ob{
color: aquamarine;
font-size: 70px;
/* id选择器,是标签上定义的属性,id唯一 */
/* 命名规则,以数字,字母,-和_构成,不能以数字开头,不能包含特殊字符 */
#p{
color: blue;
}
</style>
</head>
<body>
<!-- /* 选择器优先级:类>id>标签 -->
<p class="op" id="p">富强民主文明和谐美丽</p>
</body>
</html>