子代选择器子代自身冲突

最新推荐文章于 2022-10-19 13:50:29 发布

weixin_30412167

最新推荐文章于 2022-10-19 13:50:29 发布

阅读量62

点赞数

原文链接：http://www.cnblogs.com/sh7ning/archive/2012/04/07/2436015.html

版权

先看一段简单的html代码：

<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div p{
    color:red;}

    .son{
    color:blue;}
</style>
</head>
<body>
<div class="father">
<p>TEST</p>
<p class="son">测试文字</p>
</div>
</body></html>

执行后内容的颜色分别是什么？

现在再来看一段代码，下面这段代码就是把div p样式改成了.father p，代码如下

<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    .father p{
    color:red;}

    .son{
    color:blue;}
</style>
</head>
<body>
<div class="father">
<p>TEST</p>
<p class="son">测试文字</p>
</div>
</body></html>

执行后内容的颜色又分别是什么？

如果我们在这把上面div里面的class换成id，代码如下：

<html><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #father p{
    color:red;}

    .son{
    color:blue;}
</style>
</head>
<body>
<div id="father">
<p>TEST</p>
<p class="son">测试文字</p>
</div>
</body></html>