html设置指针的样式,CSS 指针

什么是CSS指针?这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...}

对于yangshi_a是yangshi 指向的样式

我们可以作1个实验来理解此CSS 指针 是什么

原CSS div样式

.yangshi{ width:300px; height:50px; border:1px solid #F00; margin:0 auto; text-align:right;}

.yangshi .yangshi_a{ float:left; width:30px; border:1px dashed #333;}

.yangshi .yangshi_b{ float:right; width:50px; border:1px dashed #333;}

内容a
内容b
s.gif

浏览器显示结果:

ab548106f1e3695d61b44b2c73535f7f.png

就我们以上实例来做

我们将.yangshi .yangshi_b{...} 改为.yangshic .yangshi_b{...}

得到 .yangshic .yangshi_b{ float:right; width:50px; border:1px dashed #333;}

然后你浏览下结果

ebf64a37ad17ddf4953bfd86ab2c627d.png

CSS指针效果

是的 是不是感觉yangshi_b虽然我们 在使用class调用了但是失效了

怎么多中间的虚线了

那就是因为DIV独占一行的特性出来了

内容b
失效了

当然你会看到

ebf64a37ad17ddf4953bfd86ab2c627d.png

是的 是因为CSS指针属性,看到改后yangshi_b可以理解父级(yangshic)不存在(或html中改后yangshi_b父级是yangshi而不是yangshic所以为导致yangshic指针到yangshi_b的样式失败)

这个CSS指针我们可以很好利用

比如以后我们统一css命名 比如在一个网页中很多栏目标题我们就以.titles命名 我们可以利用CSS指针给他赋予不同父级 在不同地方使用并赋予不同CSS样式,利用这一特点 让我们维护更加容易,一看此命名就知道此处是某栏目标题意思

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值