web

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

上一篇下一篇

猜你喜欢

热点阅读