Question

DIV+CSS高手请进

.x-btn .direction-asc {
background-image: url("../../../resources/themes/images/default/grid/sort_asc.gif");
background-position: 4px 6px !important;
}
上面的CSS样式为什么会有两个样式名 这两个样式名有什么用呢 希望高手给予解答 越详细越好 拒绝复制

Answer 1

.x-btn .direction-asc这里其实只引用到了1个样式，这种写法是为了给样式控制标签引用的样式，通俗的讲就是给某个或者某些标签固定了样式，也就是给这个样式设了一个“绝对位置”，防止其他地方重名的样式引用错误，这种写样式的方法新手慎重，不熟悉就还是写单样式，多点代码没关系，别出错就行，这种样式写法改起来比较麻烦
举个例子：
<div class="Style01">
<div class="Style02">
<div class="Style03"></div>
</div>
</div>

样式 .Style01 .Style02 .Style03{...}
这里只引用了Style03的样式，前面2个只是确定位置，是包含关系

追问

能不能在讲的通俗一点，有点看不太懂！

追答

.Style01 .Style02 .Style03{...}
这个div是处于之内的；
而这个div又是处于之内的；
上面这种写法就是一层一层类似布局包含的关系
在解释一下为什么不会出现重名而不出错的原因，比如下面的布局

第一个

第二个

因为样式确定了包含关系，所以只有“第一个”div可以引用到样式，而第二个却不能，除非重新写一个样式 .Style01 .Style04 .Style03{...}

这东西我不能讲的再通俗了，再不了解我就没办法了，这东西看一眼一般都能懂得

Answer 2

1.第一个定义背景图像，路径为("../../../resources/themes/images/default/grid/sort_asc.gif")。

2.第二个定义背景图像的位置，0,0为最左角上方，所以4,6坐标是其相对于0,0的位置。

Answer 3

楼主是问.x-btn .direction-asc
还是问 background-image: url("../../../resources/themes/images/default/grid/sort_asc.gif");
background-position: 4px 6px !important;

Answer 4

两个属性分别代表的意思是：背景图片以及背景图片距离此div左边与上边的位置。