编号类/id 的 CSS 选择器

Question

我有以下情况：

<div id="myMenu">
   <div id="menu0">stuffs</div>
   <div id="menu1">stuffs</div>
   <div id="menu2">stuffs</div>
   ...... and so on
</div>

我的要求是访问除 menu0 之外的 myMenu 内所有 id 为 $=menu 的 div，因为我的菜单可以有 10 到 15 个项目，所以一种方法是：

 #myMenu > menu1 {style}
 #myMenu > menu2 {style}
 so on... 15 times

但由于我必须为所有这些都赋予相同的样式，这似乎没有必要，我正在寻找适合我的要求的 CSS 选择器，它也兼容 IE8。

非常感谢任何帮助。

Answer 1

如果你总是有 #menu0 元素，你可以使用兼容 IE8 的通用兄弟选择器：

    #menu0 ~ [id^="menu"] {
        color: red;
    }

<div id="myMenu">
   <div id="menu0">stuffs</div>
   <div id="menu1">stuffs</div>
   <div id="menu2">stuffs</div>
</div>

或使用更适合的classes（连同ids）。

Answer 2

这个css3规则会得到不带#menu0的列表：

div#myMenu > div:not(#menu0)
{
}

或者，您可以使用这两个：

div#myMenu > div
{ 
    /*new values*/ 
}

div#myMenu > div#menu0
{ 
    /*reset with the original values*/ 
}

此代码将命中所有子 div，然后第二条规则将覆盖前一条，因为它位于级联的后面并将 #menu0 重置为其原始状态。

Answer 3

你可以使用类，但你也可以：

#myMenu div[id^="menu"]:not(#menu0) {
  color: red;
}

<div id="myMenu">
  <div id="menu0">stuffs</div>
  <div id="menu1">stuffs</div>
  <div id="menu2">stuffs</div>
  <div id="menu3">stuffs</div>
  <div id="menu4">stuffs</div>
  <div id="menu5">stuffs</div>
</div>

这个选择所有id，它以单词'menu'开头并且是id为#myMenu的元素的子元素，但排除了id为#menu0的元素

在旧浏览器的注释后，例如ie8 你可以使用：

#myMenu div[id^="menu"] {
  color: red;
}
#myMenu #menu0 {
  color: #000;
}

<div id="myMenu">
  <div id="menu0">stuffs</div>
  <div id="menu1">stuffs</div>
  <div id="menu2">stuffs</div>
  <div id="menu3">stuffs</div>
  <div id="menu4">stuffs</div>
  <div id="menu5">stuffs</div>
</div>

因为 id 是唯一的。

Answer 4

添加另一个类：

<div id="myMenu">
   <div id="menu0">stuffs</div>
   <div id="menu1" class="sub">stuffs</div>
   <div id="menu2" class="sub">stuffs</div>
   ...... and so on
</div>

然后选择：

#myMenu > .sub{ ... }

或简单

#myMenu  .sub{ ... }

Answer 5

如果正如 cmets 对问题所暗示的那样，它始终是不应该选择的第一个孩子：

/* selects all the <div>s with an id beginning with 'menu',
   that follow a <div> with an id beginning with menu, that
   are the direct-children of the element with an id of 'myMenu': */
#myMenu > div[id^=menu] + div[id^=menu] {
    /* css here */
}

或者：

/* selects all <div> elements that are not the :first-child
   that are direct children of <div id="myMenu">: */
#myMenu > div:not(:first-child)
    /* css here */
}

或者：

/* selects all <div>s with an id beginning with menu that
   have a previous sibling <div> with an id beginning with
   'menu' that is the direct child of <div id="myMenu">: */
#myMenu > div[id^=menu] ~ div[id^=menu] 
    /* css here */
}