CSS层叠样式表

1. 1. 类选择器结合派生选择器

<div>

<p>段落</p>

</div>

<div class="targetDiv">

<p>目标段落</p>

</div>

<div>

<p>段落</p>

</div>

<div class="targetDiv">

<p>目标段落</p>

</div>

.targetDiv p {

font-style: italic;

font-size: 30px;

}

1. 1. 元素也可以基于它们的类而被选择

<p class="big">段落</p>

<p class="big">段落</p>

<table>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

<tr>

<td class="big">单元格</td>

<td class="big">单元格</td>

<td class="big">单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

</table>

   td.big {

background-color: #cccccc;

color: #0000ff;

}

.big {

font-style: italic;

}

1. CSS框模型
2. 

3. 

4. 

5. 

6. 

7. ②存在已定位的祖先元素：相对于最接近的已定位的祖先元素

   <div> </div>

   <div> </div>

   <div id="pos"><div id="test">测试</div></div>

   <div> </div>

   <div> </div>

   #pos {

   position: absolute;

   top: 30px;

   left: 100px;

   }

     #test {

   position: absolute;

   top: 5px;

   left: 20px;

   }

8. 

9. 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。