多個ID選擇不工作

所以我有兩個div像這樣：多個ID選擇不工作

<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選擇器，另一個工作正常。

我想它應該工作？怎麼了？

來源

2014-12-03 user3343366

或許不相關，但你的結尾'

'元素是錯誤的。應該是'' – j08691 2014-12-03 14:34:27

@ j08691謝謝，我修復了它。 – user3343366 2014-12-03 14:35:49

如果它幫助你解決問題，不要忘了標記一個正確答案，以便稍後幫助其他人。（在這種情況下並不多，但作爲一般規則） – 2014-12-04 11:08:29

嘗試：

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

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

，如果你想選擇ul的和li'你需要與兩個選擇指定該兩個容器的秒。

來源

2014-12-03 14:33:59

我是個白癡......謝謝！ – user3343366 2014-12-03 14:36:26

沒問題，它發生在我們身上！ – 2014-12-03 14:37:22

關於''''必須遵循'ul'，您可以簡化'#first_content ul li，#second_content ul li'爲'#first_content li，#second_content li'，甚至'[id * = _ content] li'最後不推薦） – SW4 2014-12-03 14:38:07

基本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的上級分區和second-content區域中的<li>標記。

來源

2014-12-03 14:35:57

感謝您的詳細解答！ – user3343366 2014-12-03 14:37:16

下面是一些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/horizontal_master.htm

來源

2014-12-03 14:41:43

多個ID選擇不工作

回答

相關問題