css中>和+的使用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,560评论 0 40
  • 认识css CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML...
    三秒嗨阅读 3,833评论 0 1
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,539评论 0 30
  • 一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTM...
    snowy_sunny阅读 4,781评论 0 4
  • good day,good mood,good job。 leave paw here。
    frozendavie阅读 1,405评论 0 0

友情链接更多精彩内容