第一种情况——只有一个p标签:
<body>
<div id="wechat1" class="weixin1">
<div id="wechat2" class="weixin2">
<div id="wechat3" class="weixin3">
<p>Please make me red</p>
</div>
</div>
</div>
</body>
CSS编辑器如下:
1.
<style type="text/css">
p{
color:red;
}
</style>
2.
<style type="text/css">
div p{
color:red;
}
</style>
3.
<style type="text/css">
div div p{
color:red;
}
</style>
4.
<style type="text/css">
div div div p{
color:red;
}
</style>
5.
<style type="text/css">
#wechat1 div p{
color:red;
}
</style>
6.
<style type="text/css">
#wechat1 div div p{
color:red;
}
</style>
7.
<style type="text/css">
#wechat1 .wechat2 div p{
color:red;
}
</style>
8.
<style type="text/css">
#wechat1 .weixin2 #wechat3 p{
color:red;
}
</style>
9.
<style type="text/css">
#wechat1 #wechat3 p{
color:red;
}
</style>
10.
<style type="text/css">
div.weixin1 #wechat2 div p{
color:red;
}
</style>
第二种情况——有多个p标签,有的红有的不红:
<body>
<div class="tebiede">
<p class="special">我想红</p>
<p class="special">我想红</p>
<p>I want red</p>
</div>
<div class="tebiedi">
<p class="special">我才不想红</p>
<p>I want red</p>
</div>
</body>
CSS编辑器如下:
1.
<style type="text/css">
.special{
color:red;
}
</style>
2.
<style type="text/css">
.tebiede .special{
color:red;
}
</style>
如果让指定句段变红:
<body>
<div class="tebiede">
<h3 class="special">我想红</h3>
<p class="special">我想红</p>
<p>I want red</p>
</div>
<div class="tebiedi">
<p class="special">我才不想红</p>
<p>I want red</p>
</div>
</body>
则CSS编辑器如下:
1.
<style type="text/css">
.tebiede .special{
color:red;
}
</style>
2.
<style type="text/css">
.tebiede p.special{
color:red;
}
</style>
3.如果只想让I want red那句变红,则可以(层叠式):
<style type="text/css">
.tebiede p{
color:red;
}
.tebiede .special{
color:black;
}
</style>