2015-03-09 2 views
-1

Я хотел бы изменить стиль текста элемента в списке, например, «желтый»:Как изменить стиль текста в одном элементе списка?

  • белого
  • оранжевого
  • желтых
  • синего

Есть ли способ сделать это из CSS без использования JavaScript. Элемент не обязательно предпоследний в списке. ЛЮБОЕ указатель высоко ценится

+1

Изменение стиля является то, что CSS сделано для. Просьба уточнить фактическую проблему, с которой вы столкнулись, и добавить свой текущий код, который не работает – Huangism

+0

Пожалуйста, внесите свой код –

+2

Да, можно создать стиль в списке. – GolezTrol

ответ

0

Вы можете использовать п-й ребенок:

 
#example:nth-child(3) { 
    background-color: yellow; 
} 

предполагая список таких как:

 
<ul id="example"> 
<li>white</ul> 
<li>orange</li> 
<li>yellow</li> 
<li>blue</li> 
</ul> 

Там нет Селектор CSS на основе содержимого элемента. Вы можете использовать JQuery:

Чтобы установить значение CSS свойства:

$("#example li:contains('yellow')").css('background-color','yellow');

или если вы хотите назначить класс CSS:

$("#example li:contains('yellow')").addClass('makeYellow');

где CSS для примера сразу выше будет что-то вроде:

.makeYellow { background-color:yellow; }
+0

Спасибо Дрю, это именно то, что я думал делать, однако список создается «на лету», и некоторые другие элементы списка могут быть добавлены к текущему, поэтому, если я обращусь к «желтому» элементу, как это, если я добавлю один больше предметов, у «синего» будет другой фон. Я думал, можно ли проверить текстовое содержимое элемента списка, и если оно равно «желтому», тогда примените другой стиль. – Shakamal

1

Вы можете указать id или класс для элемента списка, который вы хотите установить цвет. Затем в вашей таблице стилей вы просто устанавливаете цвет для этого идентификатора или класса. Вот пример:

<style> 
    .highlight {color: yellow} 
</style> 
<ul> 
    <li class="highlight">yellow</li> 
</ul> 
+0

Я категорически отвергаю использование названий цветов в качестве имен стилей. – eyegropram

+0

Это просто прояснилось. Похоже, что OP не понимает классы и идентификаторы, так зачем их усложнять;) – Niro

+0

Полностью понять ясность, код просто заставляет меня съеживаться, чтобы видеть! :) – eyegropram

0

Ну вы можете использовать селектор ID для этой цели, вы должны изменить вам HTML-код и добавить идентификатор для этого элемента в списке.

#yellow{ 
 
    background-color: yellow; 
 
    }
 <uL> 
 
    <li>white</li> 
 
    <li>orange</li> 
 
    <li id="yellow">yellow</li> 
 
    <li>blue</li> 
 
</ul>

Смежные вопросы