Question

有人可以告诉我为什么#controls div无法设置样式且里面的项目不是从#wrap div继承样式？我无法理解它，这让我发疯。

<body>
	<div id="wrap">
		<div id="slider1">
			<ul id="slider_items" class="slider">
                <li><div style="width:200px;height:300px;background:#2aa198;"> 1</div></li>
                <li><div style="width:250px;height:300px;background:#268bd2;"> 2</div></li>
                <li><div style="width:100px;height:300px;background:#6c71c4;"> 3</div></li>
                <li><div style="width:170px;height:300px;background:#d33682;"> 4</div></li>
                <li><div style="width:300px;height:300px;background:#dc322f;">5</div></li>
                <li><div style="width:200px;height:300px;background:#cb4b16;">6</div></li>
                <li><div style="width:1000px;height:300px;background:#b58900;">7</div></li>
                <li><div style="width:100px;height:300px;background:#859900;">8</div></li>
			</ul>
         </div>
         <div id="controls" class="controls">
                <a href="#" class="prev-slide"></a>
                <a href="#" class="next-slide"></a>
		 </div>
	</div>
	<script src="lemmon-slider.js"></script>
	<script>
	window.onload = function(){

		// slider 1
		$( '#slider1' ).lemmonSlider({
			infinite: true
		});
	}
	</script>
    
	<style type="text/css">
	#wrap { width:80%; margin:20px; background:#ffc; }
	#slider1 { overflow:hidden; position:relative; width:100%; height:300px !important; }
	#slider_items li { text-align:center; line-height:160px; font-size:25px;  float:left; list-style:none; margin:0 5px 0 0; }
	.prev-slide {position:absolute; display:block; float:left; height:300px; width:100px; background: #C0C0C0; cursor: pointer;cursor: hand;}
	.next-slide {position:absolute; display:block; float:left; right:0; height:300px; width:100px; background: #C0C0C0; cursor: pointer;cursor: hand;}
	#controls {background-color:#F8E5C9; top:100px;}
	</style>

</body>

Answer 1

您需要指定要从其父级继承的属性并执行{property：inherit}，在这种情况下，我猜你想要这样做：

{
  width: inherit;
  margin:inherit;
}

Answer 2

除了询问什么之外，如果您在Internet Explorer开发人员工具中打开它会更容易，它会告诉您继承的值会覆盖您的样式。

我知道IE不是很好，但开发工具很棒。只需打开IE，转到您的页面并按F12。

使用Chrome，您可以执行相同操作或使用Firefox。

如果您不想继承，可以在css中使用！important 作为关键字。

什么阻止这个div继承样式？

2 个答案: