CSS样式嵌套：应用顺序main---left--channel---node---box，可否缩短定义？

html-css010

CSS样式嵌套：应用顺序main---left--channel---node---box，可否缩短定义？,第1张

1、可以，嵌套是为了更精确的定位某个标签或元素的样式，只要你能确保没有跟页面上其他标签或元素的样式冲突，你甚至可以直接写.box{line-height:25pxpadding-bottom:30px}，另外这里有个个人小建议，.left这样的以一个单独的完整属性或属性名命名的样式最好不要出现，这是我的前辈告诉我的，你可以写成.fl_left或left_cont之类的

2、不一定，要看你具体的目的；如果你的意思是类似下例这样的应用，那么是可以的（原理是：只要你没有样式冲突问题，那么.main .left .channel .node .box{line-height:25pxpadding-bottom:30px}这个写法与.main .box{line-height:25pxpadding-bottom:30px}这个写法效果相同，也就是说在没有冲突的情况下，样式的嵌套写法并非必须每层嵌套都写出来，可以省略某个或某几个，但是样式的父子级别要搞清楚不能乱）。

<div class="main">

<div class="left">

<div class="side">

<div class="channel">

<div class="node">

<div class="box"></div>

</div>

</div>

</div>

</div>

</div>

之前遇到过 fixed 布局嵌套的一些场景， fixed 布局是针对 body 定位的，但是在某些特殊情况下，子级的 fixed 会受到父级 fixed 的影响，除了需要 z-index 来区分层级，还要注意 transform 的使用（貌似好多地方 transform 都会引发问题）

一般的场景是一个遮罩加一个弹框

效果是这样的

这个时候在内部的 children 再使用 fixed 布局时，就会被父级的 fixed 元素限制住

1、父级不使用 tansform

2、不进行嵌套