Question

我有5个菜单项，并在图像上重复5次背景，使用background-position:0 -60px来提供“选定”效果。

要选择使用图像的哪个部分，我正在尝试使用带数字的类，但它似乎不起作用。

（对不起，我很难解释）

的jsfiddle： http://jsfiddle.net/G4mLB/

HTML：（Class = 3假设是第3页）

<div id="menu" class="3">

CSS：

#menu {
    position:absolute;
    top:104px;
    left:0;
    height:60px;
    width:523px;
    background-image:url('http://kitoit.com/new/img/menu-buttons.png');
}
#menu .1 {
    background-position:0 0px;
}
#menu .2 {
    background-position:0 -60px;
}
#menu .3 {
    background-position:0 -120px;
}
#menu .4 {
    background-position:0 -180px;
}
#menu .5 {
    background-position:0 -240px;
}

Answer 1

您有无效的班级名称，他们不能以号码开头 - 请参阅this answer，特别是：

基本上，名称必须以下划线（_），短划线（ - ）或字母（a-z）开头，后跟任意数量的短划线，下划线，字母或数字。

要解决您的问题，请为其命名，例如itemX，然后将其命名为{注意我删除了#menu和.item3之间的空格）：

#menu.item3 {
   background-position:0 -120px;
}
...
<div id="menu" class="item3">

通过工作示例查看此JSFiddle。

Answer 2

而不是给我们编号并改变这样的css

JSFIDDLE：http://jsfiddle.net/G4mLB/14/

CSS

#menu {
  position:absolute;
  top:104px;
  left:0;
  height:60px;
  width:525px;
  background-image:url('http://kitoit.com/new/img/menu-buttons.png');
}

div.one {
 background-position:0 0px;
}
div.two {
 background-position:0 -60px;
}

div.thr {
 background-position:0 -120px;
}

div.four {
background-position:0 -180px;
}

div.five {
background-position:0 -240px;
}

根据ID和Class选择CSS类？

2 个答案: