关于CSS样式中大于号的使用及Css中处理继承方法

继承给我们的程序带来一定的困扰,所以认真的学习继承的原理,下面有个不错的示例,一个处理继承的一个方法,感兴趣的朋友可以参考下

继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。

在一段CSS代码中见到一个大于号(>),代码如下:

BODY#css-zen-garden > p#extrap2 { BACKGROUND-IMAGE:url(../images/bg_face.jpg); Z-INDEX: 2; POSITION: fixed; WIDTH: 205px; BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left bottom; HEIGHT: 594px; LEFT: 0px }

登录后复制

CSS中的大于号表示什么意思呢?

立即学习“前端免费学习笔记(深入)”;

举例说明:有一个p层包含多个span标签,代码如下:

 亲人 独家记忆 离不开你 

登录后复制

此时用CSS定义其样式应该这样:

p span { font:10px; color:blue; }

登录后复制

但是此时,需要将第一个span标签显示不同的样式,后两个标签样式不变,怎么办呢?将第一个span放到一个p标签中,这样可以吗?代码如下:

 

 亲人 

 独家记忆 离不开你 

登录后复制

遗憾的是这样不可以,因为p span {……}样式对p层之下的所有span标签都起作用,不管是子标签,还是孙辈的标签,所以该样式依然起作用。此时就用到了CSS中的”大于号”。

现在我们把这个样式改变一下,代码如下:

p > span { font:10px; color:blue; }

登录后复制

这样就可以实现第一个span标签与其它两个显示不同的样式。所以我们可以知道CSS中的”大于号”的作用是:在嵌套标签中,将样式只作用于儿子辈的标签,而不作用于孙子辈的标签。

但是还存在这样一种情况,如下代码:

 亲人 丁当  独家记忆 离不开你 

登录后复制

此时,这个”大于号”还会起作用吗?答案是:不会。因为这个孙子辈的span标签继承儿子辈的span标签样式。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS中的inherit使用分析

CSS样式的覆盖规则

以上就是关于CSS样式中大于号的使用及Css中处理继承方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2896839.html

(0)
上一篇 2025年3月10日 23:17:10
下一篇 2025年2月24日 01:09:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用css sprites把很多小图放在在一张图片上

    这篇文章主要介绍了关于如何使用css sprites把很多小图放在在一张图片上,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 网页制作Webjx文章简介:在google中搜索一下css sprites这个名称,会查出很多信息…

    2025年3月10日
    200
  • 使用css样式制作的漂亮按钮

    这篇文章主要介绍了关于使用css样式制作的漂亮按钮,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 css样式制作的按钮,很漂亮,值得收藏,在下文贴出具体的实现css,喜欢的朋友可以研究下 nbsp;html PUBLIC “…

    2025年3月10日
    200
  • css继承是什么意思?css哪些属性可以继承?

    在css的学习过程中,我们会遇到一些属性可以继承,那么,css中的继承是什么意思?有哪些属性可以继承呢?本篇文章就给大家来介绍一下css中继承性的内容。 我们定义css继承前,先来看一看HTML DOM(文档树),HTML DOM(文档树)…

    编程技术 2025年3月10日
    200
  • css中内联元素可继承的属性有哪些?

    css中内联元素可继承的属性有:text-shadow、line-height、word-spacing、letter-spacing、font-family、font-weight、font-size、font-style、font等等。…

    2025年3月10日
    200
  • 怎么在标签中写css样式

    方法:直接在标签的style属性中写入css样式即可,style属性中可以规定元素的行内样式,语法“”。 本教程操作环境:windows7系统、css3+html5版,该方法适用于所有品牌电脑。 (推荐教程:html教程、CSS视频教程) …

    2025年3月10日
    200
  • 网页设计中为什么用css样式

    原因:1、方便网页设计的分工协作,比如说html部分由一个人或一个团队去完成,js程序部分也是一批人去完成,css也是交给专业人士去做,这样就能提高效率;2、css是可以重用的,这样就可大大减少网页的代码量,提高网页传输效率。 本教程操作环…

    2025年3月10日
    200
  • jsp页面如何加入css样式

    jsp页面加入css样式的方法:1、在jsp页面中使用“”标签链接css样式表;2、在jsp页面中使用“”标签在文档头部定义内部样式表;3、在jsp页面的标签元素中使用style属性包含任何css样式。 本教程操作环境:Windows7系统…

    2025年3月10日
    200
  • css有继承关系吗

    css有继承关系。CSS继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代;也就是说:设置了上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此样式。 本教程操作环境:windows7系统、css3…

    2025年3月10日
    200
  • jq如何动态添加动态css样式

    jq动态添加动态css样式的方法:首先准备jquery库文件,并声明一个class样式;然后准备一个事件加载初始化的方法,并直接用匿名函数;接着addClass方法给div元素添加class;最后通过css方法进行级联的更改。 本教程操作环…

    2025年3月10日 编程技术
    200
  • css中哪些属性可以继承

    css中可以继承的属性有:text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、visibility、color、cursor等等。 本教…

    2025年3月10日 编程技术
    200

发表回复

登录后才能评论