css - Sprite 图像的嵌套CSS类

Question

我对 css Id/class 嵌套有点困惑。
示例代码如下:

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>`  

问题

1. 代码行2和3是否需要给出anchor或者任何元素标签？
2. 获取第 5 行的最佳方法是什么(如果 Q1 为真，我在 css 类中删除 # 并放置 . 但在我的页面中不起作用)？这是正确的吗

--

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

并像第 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>但无法让它像 5 一样......

Answer 1

Q.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 层)都应该采用背景，但这些元素内部的任何内容都不应采用背景，那么您可以像这样使用子选择器 ( > ):

<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"的元素内部的 anchor 和跨度

或者您可以完全避免使用标签名称(如果您对渲染速度非常敏感)(使用第 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; }

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