Question

我有以下情况：

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

我的要求是访问除$=menu之外的myMenu内{id}为menu0的所有div，因为我的菜单可以包含10到15个项目，所以单向执行：

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

但是由于我必须为它们提供相同的样式，所以似乎没有必要，我正在寻找适合我的要求的CSS选择器，它也兼容IE8。

非常感谢任何帮助。

Answer 1

此css3规则将获取没有＃menu0的列表：

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

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

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

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

此代码将命中所有子div，然后第二个规则将覆盖前一个规则，因为它稍后在级联中并将＃menu0重置为其原始状态。

Answer 2

您可以使用课程，但您也可以：

＆＃13;

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

＆＃13;

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

＆＃13;

这个选择所有id开头的单词＆＃39; menu＆＃39;并且是标识为#myMenu的元素的子元素，但不包含标识为#menu0

的元素

对旧版浏览器发表评论，例如ie8你可以使用：

＆＃13;

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

＆＃13;

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

＆＃13;

因为id是唯一的。

Answer 3

如果您始终拥有#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（以及id s）更适合。

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

如果对问题的评论暗示，它始终是第一个不应被选中的孩子：

/* 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 */
}

编号为class / id的CSS选择器

5 个答案: