多個ID選擇器不起作用

Question

所以我有兩個Divs像這樣：

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

和CSS：

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

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

它不起作用（至少在Firefox 34中有效）。 樣式僅適用於一個ID。

當我刪除其中一個ID選擇器時，另一個工作正常。

我想應該可以嗎？ 怎么了？

Answer 1

嘗試：

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

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

如果要同時選擇兩個容器的ul和li ，則需要使用兩個選擇器指定它。

Answer 2

基本CSS

.foo, .bar { ... }

是兩個單獨的選擇器鏈。 你有：

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

<div>標記沒有list-style ，因此您的第一個規則對第一個<div>設置沒有任何作用。 對於您的其他規則集， display-inline將應用於first-content的父div以及second-content區域中的<li>標記。

Answer 3

這是一些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>

這些應該產生期望的效果。 資料來源： http : //css.maxdesign.com.au/listutorial/horizo​​ntal_master.htm

Answer 4

多個ID串聯從未在Firefox中起作用。 例如，我正在使用67.0（64位），並且以下CSS可以按預期工作：

#noDisplay {
   display: none;
}

#togForm {
   display: none;
}

...但是，如果我將其連接起來，如下所示，它將不起作用（一個id有效，另一個id不起作用），並且一直都是這種情況。

#noDisplay,#togForm {
   display: none;
}

我知道有時原因是因為條目沖突，但顯示：沒有單獨顯示嗎？ -如果可以的話，與之爭辯！