css 特性-选择器-CSDN博客

本文链接：https://blog.csdn.net/fonyer/article/details/83119252

标签选择器级别最低

类别选择器比标签选择器高

id选择器比类别选择器高

行内样式比id选择器级别高

类别默认第一个

交集选择器(类别)棕色

交集选择器(id)棕色

并集选择器

并集选择器

后代选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css特性</title>
</head>
<style type="text/css">
/*---标签选择器---*/
div{
font-weight:bold;
}
p{
   color:#000000;
}
/*---类别选择器---*/
.red{
   color:#FF0000;
}
.yellow{
color:#FFFF00
}
/*---id选择器---*/
#green{
   color:#00FF00;
}
/*---交集选择器---*/
p.brown{
color:#CC6633
}
p#brown{
color:#CC6633
}
/*---并集选择器---*/
h1,p.h,p#h{
color:#FF0000;
font-size:36px
}
/*---后代选择器---*/
div p{
color:#0000FF;
font-size:24px
}
</style>

<body>
<p>标签选择器级别最低</p>
<p class="red">类别选择器比标签选择器高</p>
<p class="red" id="green">id选择器比类别选择器高</p>
<p style="color:#0033FF" id="green">行内样式比id选择器级别高</p>
<p class="yellow red">类别默认第一个</p>
<p class="brown">交集选择器(类别)棕色</p>
<p id="brown">交集选择器(id)棕色</p>
<h1>并集选择器</h1>
<p class="h">并集选择器</p>
<p id="h">并集选择器</p>
<div><p>后代选择器</p></div>
</body>
</html>