мои частичные html коды:
<body>
<div id="div1" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>one</p></li>
<li><h2>2</h2><p>two</p></li>
<li><h2>3</h2><p>three</p></li>
<li><h2>4</h2><p>four</p></li>
</ul>
<div class="text">
<h2>arrangement</h2>
<p>...</p>
</div>
</div>
</body>
и мои css коды:
<style>
body{background:skyblue;}
#div1 {height:700px;width:440px;background:gray;margin-left:400px;margin-top:10px;position:absolute;}
#div1 ul{margin-top:20px;}
.text{background:white;height:150px;width:335px;font-size:15px;margin-top:520px;margin-left:50px;position:relative;border:2px solid blue;padding-left:10px;}
#div1 ul li{list-style:none;height:100px;width:100px;background:black;float:left;margin:10px;text-align:center;border:1px solid #000;color:white;}
.active{background:white;color:red;}
</style>
Я считаю, что только когда я использую #div1 .active{...}, это может работать. Я хочу знать причину, по которой .text{...} может работать, но .active{...} не может работать.
Я запускаю коды на Chrome.