Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
<div class="box" id="box">我是box</div>
<style>
div{
background-color: red;
/* width失效权重低于(0,1,1) */
width:1000px
}
div.box {
width:300px;height:300px;
/* height失效,权重低于.(1,1,1) */
}
div#box.box{
height:500px;
/* 权重计算过程是 id=(1,0,0) class=(0,1.0) html标签=(0,0,1) 权重高覆盖权重低 */
}
</style>
效果图
<ul>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
<li class="item">item9</li>
<li class="item">item10</li>
<li class="item">item11</li>
</ul>
<style>
/* 第一种常用伪类 鼠标放上去效果 */
li:hover{
background-color: #333;
}
/* 第二种通常在列表中使用某一个或某一组。 :nth-of-type(an+b); */
/* 01选中前三个 */
ul li.item:nth-last-of-type(n+3){
background-color: #555;
}
/* 匹配最后一个 */
ul li.item:last-of-type{
background-color: green;
}
/* 匹配一组 */
ul li.item:nth-last-of-type(1n){
background-color: #22ffcc;
}
/* 匹配偶数组 */
ul li.item:nth-last-of-type(even){
background-color: #22ffcc;
}
/* 匹配奇数组 */
ul li.item:nth-last-of-type(odd){
background-color: #22ffcc;
}
</style>