css中>和+的使用
2017-03-05 本文已影响2人
DecadeHeart
1.>的使用
继承有的时候用过了头“>"可以来救场
eg:
<div>
<span>亲人</span>
<span>独家记忆</span>
<span>离不开你</span>
</div>
其css:
div span {
font:10px;
color:blue;
}
此时要求是,将第一个span与其他的显示不同样式,此时的话是全部继承同一个
span样式
<div>
<p>
<span>亲人</span>
</p>
<span>独家记忆</span>
<span>离不开你</span>
</div>
若改成这样,虽然第一个span已经变成了孙子辈,然而div span样式对该层之下所有span都有效,因而有如下改变
div > span {
font:10px;
color:blue;
}
此时可以报称,该样式只作用于儿子辈标签,不作用于孙子辈
还有以下的情况
<div>
<span>亲人
<span>丁当</span>
</span>
<span>独家记忆</span>
<span>离不开你</span>
</div>
此时的大于号不起作用,因为孙子辈的span会继承儿子辈span样式
2.+的使用
就是选择某个元素的下一个元素
<p id="x"><p>
<p></p>
》#x + p 就是选择第二个P