Question

我对css Id / class nesting感到困惑。
示例代码如下：

1) #sprit-img {
    display:inline;
    border:1px solid #FFF;
    text-decoration:none;
    display:block;
    float:left;
    width:50px;
    height:50px;
    background-image:url(ig-sprite.png);
    background-repeat:no-repeat;
    margin:5px;
    }
2) #sprit-img a.brew{
    background-position:2px 0px;}  
3) #sprit-img a.scc{
    background-position:-295px 2px;}

我在页面中的

喜欢

4) <div id="sprit-img><a class="brew"></a>...</div> `

现在我想像

一样使用它

5) <div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>`

问题

是否有必要在代码行 2和3 中提供锚点或任何元素标记？
什么是获得第5行的最佳方式（如果Q1为真，在css类中我删除了＃并放置。但在我的页面中没有工作）？这是正确的

-

6) .sprit-img{.....same code..}  
    .brew{...same position..}  
    .scc{..same postion...}

并像第5行或第5行一样使用它这是正确的

7) .sprit-img{.....same code..}  
    .sprit-img .brew{...same position..}  `

感谢。

编辑：我尝试了一些混合放置背景图像，从 sprit-img到brew和scc ，发现如果我把样式放在6中，html部分应该像
<div class="anything"><span class="sprit-img brew"></span></div>
如果我把样式放在7个html部分应该像是 <div class="sprit-img"><span class="sprit-img brew"></span></div> 但无法让它像任何想法一样......

Answer 1

#是ID选择器，.是类选择器。所以你可以改为：

.sprit-img {...}  
.sprit-img .brew {...}  
.sprit-img .scc {...}

和

<div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>

然而，真正的问题是你试图在.sprit-img中对子元素使用非级联属性。第一个选择器应更改为.sprit-img .brew, .sprit-img .scc

Answer 2

问题1：否。

问题2：

您需要一种方法同时在div中定位两种类型的事物，以便应用相同的bg图像，以及区分它们的方法。有很多解决方案。

只要您确定嵌入sprit-img内的任何内容都应该采用背景，您可以这样做：

<div class="sprit-img">
    <a class="brew"></a> <span class="scc"></span>
</div>

#sprit-img * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

（注意：*是通用选择器）

...虽然如果你需要在这些元素中加入任何标记，这会让你遇到麻烦（一切都会拍摄背景图片，这将是一个时髦的混乱）

因此，如果您确定所有子元素（仅嵌套1级）应该采用背景，但这些元素内部没有任何内容，那么您可以像这样使用子选择器（＆gt;）：

<div class="sprit-img">
    <a class="brew"><span> some text></span>some other text</a> 
    <span class="scc">more text <strong>something important</strong></span><
</div>

#sprit-img > * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

如果你想避免使用通用选择器（渲染在旧机器或早期浏览器版本上可能很慢），你可以选择使用（使用第5行标记）：

#sprit-img > a, #sprit-img > span { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

...然后只适用于id =“sprit-img”的元素内的锚点和跨度

或者你可以完全避免标记名称（如果你是超级渲染速度意识）（使用第5行标记）

#sprit-img .bew, #sprit-img .scc { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }

...这说明了为什么你的第一个问题的答案是“不”

为精灵图像嵌套css类

2 个答案: