Question

这是我的html和css

<html>
  <style type='text/css'>
    .rtop *, .rbottom *{
      display:block;
      height:1px;                  
      overflow:hidden;
    }
  </style>
 <link rel='StyleSheet' href='roundedCorner.css' type='text/css'>
 <body>

   <div id='abhishek1'>
     <div style='width:200px;height:5px;'>    
       <b class='rtop' >
         <b class='r1_top' style='background-color:#6e99d4 '> </b> </br>  
         <b class='r2_top' style='background-color:#6e99d4'> </b>  </br>
         <b class='r3_top' style='background-color:#6e99d4'> </b>  </br>
         <b class='r4_top' style='background-color:#6e99d4'> </b>  </br>
       </b></br>
     </div>
    </div>
  </body>
</html>

如果我从display:block中移除.rtop并将其设为内联样式，则表示不会产生相同的结果，但我不知道原因。

Answer 1

因为很可能，你把它放在错误的元素中或忘了用分号关闭某些东西。请注意，在头部它不适用于rtop和rbottom，而是适用于它们的子元素，所以你必须把它放在每个r1_ r2_等元素中。

Answer 2

该样式适用于.rtop *，而非.rtop，因此要将其应用于内联，您需要将其应用于所有子元素：

<html>
  <style type='text/css'>
    .rtop *{
      height:1px;                  
      overflow:hidden;
    }
    .rbottom * {
      display:block;
      height:1px;                  
      overflow:hidden;
    }
  </style>
 <link rel='StyleSheet' href='roundedCorner.css' type='text/css'>
 <body>

   <div id='abhishek1'>
     <div style='width:200px;height:5px;'>    
       <b class='rtop' >
         <b class='r1_top' style='display: block; background-color:#6e99d4'> </b> <br style='display: block;'>  
         <b class='r2_top' style='display: block; background-color:#6e99d4'> </b> <br style='display: block;'>
         <b class='r3_top' style='display: block; background-color:#6e99d4'> </b> <br style='display: block;'>
         <b class='r4_top' style='display: block; background-color:#6e99d4'> </b> <br style='display: block;'>
       </b></br>
     </div>
    </div>
  </body>
</html>

声明内联时，css不起作用

2 个答案: