html - 如何禁用从其他 div 继承样式？

Question

嗨，当我单独使用这些字段时，我有三个输入字段，我看到一个正常的输入字段。这里是

<div id="test">
<ul>
    <li> field1 <input type="text" name="n1"  value=""></li>
    <li> field2 <input type="text" name="n2"   value=""></li> 
    <li> field3 <textarea name="mes" rows="4" cols="25"></textarea></li> 
    <li><input type="submit" name="s" value="submit"></li>
</ul>
</div>

当我在其他 div 中使用这些东西时，我遇到了非常大的输入字段和名称（文本）。我猜这是从其他 div 继承大小。我不知道这里发生了什么。我希望它像单独使用时一样正常，即使我把它放在另一个 div 中。我应该怎么做。谢谢

Answer 1

您现在不能禁用继承样式，您可以做的是覆盖这些样式..

<div id="test" class="override">
   <ul>
      <li> field1 <input type="text" name="n1" value=""></li>
      <li> field2 <input type="text" name="n2" value=""></li> 
      <li> field3 <textarea name="mes" rows="4" cols="25"></textarea></li> 
      <li><input type="submit" name="s" value="submit"></li>
   </ul>
</div>

CSS

#test.override input[type=text] {
  /* Override here */
}

正在使用#test.override，以便特异性变得更高..

演示

演示 2（操作中的覆盖）

Answer 2

只需放宽度：自动；属性到您在 css 中的输入，这将阻止继承。