css 后代的理解

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>


<style>
 
  #text1  h1{
color:red;
  }
  #text2  a{
  color:blue;
  }


  .clsText3 h1{
  color:green;
  }


  #div1 h1{
  color:blue;
  }


  #div2 .clsH1{
  color:gray;
  }


  #div2 #objh1
  {
    color:orange;
  }


  #div3 #objh1     /*试想一下如果去除#div3的情况,出现继承*/
  {


  font-size:9px;
  }


  #div3 .clsH1{   /*如果去除#dive ,出现继承*/
  font-size:44px;
  }


</style>




 <BODY>




 <p  id="text1">
    <h1> hello </h1>
 </p>


 <p id="text2">
    <a href="#">hello </a>
 </p>


 <p  class="clsText3">
 <h1> hello</h1>
 </p>


 <div id="div1">
 <h1>hello</h1>
 </div>




<div id="div2">
 <h1 class="clsH1">div2 </h1>
 <h1 id="objh1">world</h1>
</div>


<div id="div3">
 <h1 class="clsH1">div3 </h1>
 <h1 id="objh1">world</h1>
</div>
  
 </BODY>

</HTML>


注意的是p h1这样的后代,是不对的

你可能感兴趣的:(css 后代的理解)