分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » 移动互联 » 学习之路 » CSS 样式中大于号的使用及 CSS 中处理继承方法
  • CSS 样式中大于号的使用及 CSS 中处理继承方法

  • 在一段CSS代码中见到一个大于号(>),代码如下:
  • CSS中的大于号表示什么意思呢?
  • CSS 样式中大于号的使用及 CSS 中处理继承方法-BanYuner

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

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

    BODY#css-zen-garden > DIV#extraDiv2 { 
    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中的大于号表示什么意思呢?

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

    <div> 
    <span>亲人</span> 
    <span>独家记忆</span> 
    <span>离不开你</span> 
    </div> 
    

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

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

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

    <div> 
    <p> 
    <span>亲人</span> 
    </p> 
    <span>独家记忆</span> 
    <span>离不开你</span> 
    </div> 
    

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

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

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

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

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

    <div> 
    <span>亲人 
    <span>丁当</span> 
    </span> 
    <span>独家记忆</span> 
    <span>离不开你</span> 
    </div> 
    

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

    原文地址: http://www.sjyhome.com/css/1200.html

    打赏 分享此文

    扫码,支持我

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

    支付宝(点击图片切换)

    扫码,支持我

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

    微信(点击图片切换)

    扫码,手机看

    CSS 样式中大于号的使用及 CSS 中处理继承方法
    CSS 样式中大于号的使用及 CSS 中处理继承方法
    1 + 9 =
    1. 1楼
      明月登楼
      最后评论时间:2017/12/13 13:11
      来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信
      不错,虽然一直对CSS的语法有点儿蒙圈,但这个真的是看懂了! :wink:
      • 帅气小琦琦
        最后评论时间:2017/12/14 22:22
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @明月登楼 好吧,我个人觉得CSS还是很重要的,所以优先学习CSS是可以的
        帅气小琦琦    14小时前回复