1.交集选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/css;charset=utf-8">
<title>交集选择器</title>
<style type="text/css">
p{
color:blue;
font-size: 18px;
}
p.p1{
color:red;
font-size: 24px;
}
.p1{
color:black;
font-size: 30px;
}
</style>
</head>
<body>
<p>使用P标记</p>
<p class="p1">指定了p.p1的文本</p>
<h3 class="p1">指定了.p1类别的标题</h3>
</body>
</html>
2.并集选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/css;charset=utf-8">
<title>并集选择器</title>
<style type="text/css">
h1,h2,h3,p,span{
color: red;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<p>这里是p标签</p>
<h1>这里是h1标签</h1>
<h2>这里是h2标签</h2>
<h3>这里是h3标签</h3>
<span>这里是span标签</span>
</body>
</html>
3.后代选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/css;charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
h1 span{
color: red;
}
</style>
</head>
<body>
<h1>这是h1标签内的文本<br><span>这是h1标签下span内的文本</span></h1>
<h2>这是h2标签内的文本<br><span>这是h2标签下span内的文本</span></h2>
<h2></h2>
<h1>单独的h1内的文本</h1>
<span>单独的span内的文本</span>
</body>
</html>
时间： 2024-08-09 23:50:37