Html 多个ID选择器不工作

所以我有两个类似的div：

<div id="first_content">
    <ul>
      <li>This</li>
      <li>text</li>
      <li>should</li>
      <li>be</li>
      <li>displayed</li>
      <li>in</li>
      <li>one</li>
      <li>line</li>
    </ul>
</div>

<div id="second_content">
    <ul>
      <li>This</li>
      <li>text</li>
      <li>should</li>
      <li>be</li>
      <li>displayed</li>
      <li>in</li>
      <li>one</li>
      <li>line</li>
    </ul>
</div>

它至少在Firefox34上不起作用。样式仅适用于一个ID

当我移除其中一个ID选择器时，另一个可以正常工作

我想应该有用吧？怎么了？

试试：

#first_content ul, #second_content ul {
    list-style: none;
}

#first_content ul li, #second_content ul li {
    display: inline;
}

如果您试图选择两个容器的ul和li，则需要使用两个选择器指定此选项。

尝试：

#first_content ul, #second_content ul {
    list-style: none;
}

#first_content ul li, #second_content ul li {
    display: inline;
}

如果您试图选择两个容器的ul和li，则需要使用两个选择器来指定。

基本CSS

.foo, .bar { ... }

是两个独立的选择器链。你有：

#first-content, #second_content ul
     ^--- applies to <div id="first-content">
                        ^^^^^^^^^^--- applies to any <ul> inside <div id="second-content">

标记没有列表样式，因此您的第一条规则对第一个集合没有任何作用。对于其他规则集，“显示内联”将应用于第一个内容的父div，以及第二个内容区域中的标记。

Basic CSS

.foo, .bar { ... }

是两个独立的选择器链。你有：

#first-content, #second_content ul
     ^--- applies to <div id="first-content">
                        ^^^^^^^^^^--- applies to any <ul> inside <div id="second-content">

标记没有列表样式，因此您的第一条规则对第一个集合没有任何作用。对于其他规则集，“显示内联”将应用于第一个内容的父div，以及第二个内容区域中的标记。

以下是一些css：

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

还有一些HTML：

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

这些应该会产生预期的效果。来源：

以下是一些css：

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

还有一些HTML：

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

---

这些应该会产生预期的效果。来源：

多id连接在Firefox中从未起作用。例如，我使用的是67.0 64位，以下CSS按预期工作：

#noDisplay {
   display: none;
}

#togForm {
   display: none;
}

…但如果我将其连接起来，如下所示，它不起作用一个id起作用，另一个不起作用，情况一直如此

#noDisplay,#togForm {
   display: none;
}

---

我知道，有时原因是因为条目冲突，但显示：本身没有如果可以的话，你可以与之争辩

多id连接在Firefox中从未起作用。例如，我使用的是67.0 64位，以下CSS按预期工作：

#noDisplay {
   display: none;
}

#togForm {
   display: none;
}

…但如果我将其连接起来，如下所示，它不起作用一个id起作用，另一个不起作用，情况一直如此

#noDisplay,#togForm {
   display: none;
}

---

我知道，有时原因是因为条目冲突，但显示：本身没有如果可以的话，你可以与之争辩

可能不相关，但您的结束元素是错误的。应该是@j08691谢谢，我已经修好了。如果答案有助于你解决问题，别忘了把它标为正确答案，这样以后就可以帮助别人了。在本例中并没有这么多，但作为一般规则，可能不相关，但您的结束元素是错误的。应该是@j08691谢谢，我已经修好了。如果答案有助于你解决问题，别忘了把它标为正确答案，这样以后就可以帮助别人了。在本例中不太多，但作为一般规则，谢谢您的详细回答！谢谢你详细的回答！没问题，这发生在我们最好的人身上！假设li必须遵循ul，您可以将第一个内容ul li、第二个内容ul li简化为第一个内容li、第二个内容li，甚至[id*=\u content]li。最后一个内容不推荐，但没有问题，这发生在我们中最好的人身上！假设li必须遵循ul，您可以将第一个内容ul li、第二个内容ul li简化为第一个内容li、第二个内容li，甚至[id*=\u content]li。但是，不建议最后一个内容