Множественные селекторы идентификаторов не работают

Question

Так у меня есть две дивы, как это:

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

Это не работает (по крайней мере на светлячок 34). Стиль применяется только к одному ID.

Когда я удаляю один из этих идентификаторов, другой работает отлично.

Думаю, это должно сработать? что не так?

Answer 1

попробовать:

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

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

если вы пытаетесь выбрать ul «S и li» S обоих контейнеров вы должны указать это с обоими селекторов.

Answer 2

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> теги не имеют list-style, поэтому ваше первое правило ничего не делает для первого <div> набора. Для вашего другого правила, display-inline будет применяться к родительскому div для first-content, а также к тегам <li> в области second-content.

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/horizontal_master.htm