2013-08-27 2 views
1

У меня есть два набора текста, которые должны быть встроены друг в друга, но на данный момент один помещен выше другого. Два набора текста имеют один и тот же CSS-код, поэтому, когда я его редактирую, оба затронуты. Однако я хотел бы настроить только один текст; Есть ли способ сделать это?Как настроить таргетинг на этот HTML-код отдельно в CSS?

Вот HTML и CSS:

<div id="mi-slider" class="mi-slider"> 
<? 

$result = $mysqli->query("SELECT * FROM stock"); 
while($obj = $result->fetch_object()) 
{ 
    if($obj->id&1) 
    echo "<ul>"; 

?> 
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list"> 
    <a href="#"><img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt=""></a> 
    <h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />&pound;<?=$obj->price?> each</h4> 
</li> 

CSS-код:

.mi-slider ul li h4 { 
display: inline-block; 
font-family: HelveticaNeueRegular; 
font-weight: 100; 
font-size: 12px; 
color: #a34235; 
padding: 0 0 0; 
text-align: left; 
margin-top: 20px; 
margin-left: 10px; 
float: left; 
} 
+0

если ($ obj-> ID & 1) <- Я никогда не видел, что раньше ? о, название собственности? – Cups

+1

Один амперсанд (&) обозначает побитовое И. Это будет оцениваться как true, если обе стороны выражения имеют соответствующие биты. Целое число 1 имеет наименьший значащий бит и будет оценивать значение true для любого нечетного числа. http://www.php.net/manual/en/language.operators.bitwise.php –

+0

А, конечно, я всегда забываю о поразрядном, такое умное, что это тоже. Показывает, что я не использую его достаточно часто. Спасибо @Jo Are – Cups

ответ

1

Если вы хотите предназначаться элементы второго списка H4, вы можете использовать селектор п-го ребенка, как показано ниже:

.mi-slider ul li:nth-child(2) h4 
{ your css } 
+0

Удивительно, я пробовал это, и он работал. спасибо –

2

вы можете использовать уникальный идентификатор для каждого специального элемента, а затем указать свой CSS с помощью селектора '#'.

Если специальный CSS необходимо применить к первому элементу, рассмотрите использование селектора ': first-child'. его чище. , но, если вы хотите предназначаться второй элемент (или позже) считают, что селектор 'п-го ребенка не suported в пожилом браузере (как IE8)

+0

Он использует цикл while, идентификатор должен быть уникальным в документе! –

+1

id = "" –

0

Используйте это:

li:first-child h4 
{ 
    your custum css 
} 

С этим , правила CSS применяются только к тегу h4 первого li вместо всех li.