Изменение CSS атрибут содержание определенного элемента

Question

Учитывая стиль:

ol.progtrckr li.progtrckr-todo:before { 
    content: "\039F"; 
    color: silver; 
    background-color: white; 
    font-size: 1.5em; 
    bottom: -1.6em; 
} 

и объекты:

<ol class="progtrckr" data-progtrckr-steps="5"> 
    <li class="progtrckr-todo">One</li> 
    <li class="progtrckr-todo">Two</li> 
    <li class="progtrckr-todo">Three</li> 
</ol> 

Как я могу изменить свойство содержимого только второго объекта, от

content: "\039F"; 

до

content: "\2716";?

Я пробовал:

<li class="progtrckr-todo" style="content: '\2716'">Two</li> 

Но это не работает.

Любая идея, как сделать эту работу?

Answer 1

Вы можете использовать nth-child переопределить свойства

ol.progtrckr :nth-child(2):before { 
    content: "\2716"; 
} 

Answer 2

Должно быть что-то вроде этого:

ol.progtrckr :nth-child(2):before { 
content: "\2716"; 
} 

вы можете refeer к этому, если его не то, что вам нужно

http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 3

content:'' свойство является свойством css псевдоэлемента :before, а не элементом li.

Если вы хотите изменить программный код content, вам стоит просто добавить класс в элемент li и переопределить li.yourClass:before{content:'...'} в вашем css.

Answer 4

content Недвижимость доступна только на псевдоэлементах (:before, :after). Вы не можете перезаписать его встроенным стилем, поскольку встроенный стиль всегда применяется к элементу, в котором он включен, а псевдоэлементы не являются частью разметки, которую вы можете редактировать.

Используйте либо селектор :nth-of-type или :nth-child псевдо:

ol.progtrckr :nth-child(2):before { 
    content: "\2716"; 
} 

Answer 5

Вы проблема заключается в том, что в вас CSS стили она работает с «: до того». Поэтому вам нужно вставить содержимое перед элементом. Вы можете использовать п-го ребенка W3C

Или просто добавить определенный класс к элементу втор:

secelementclass:before { 
     content: "\2716"; 
    } 

<ol class="progtrckr" data-progtrckr-steps="5"> 
<li class="progtrckr-todo">One</li> 
<li class="progtrckr-todo secelementclass">Two</li> 
<li class="progtrckr-todo">Three</li>