2013-05-17 3 views
0

Задача: Подчеркнуть выделенный текст внутри упорядоченного списка внутри любого абзаца класса «примечание». Это то, что у меня есть до сих пор ...Наследование CSS: родители и дети детей

.note>p>ol>em{text-decoration:underline;} 

Я изо всех сил пытаюсь это осуществить. Что случилось с моим кодом?

*** редактировать: Я также попытался это не дало никаких результатов:

.note p ol em{text-decoration:underline;} 

*** редактировать: Это HTML я использую, чтобы проверить его ...

<div class = "note"> 
     <p> 
     Modifiers are sometimes included along with the basic command, inside... 
     </p> 

     <table align ="center" border = "3" > 
      <td> 
       <p>Three things: 
        <ol type = "i"> 
         <li><em>First</em></li> 
         <li>Second</li> 
         <li>Third</li> 
        </ol> 
       </p> 
      </td> 
     </table> 
    </div> 
+1

От этого единственное, что я мог придумать, чтобы вы попытались заменить> на пробел ... –

+1

'.note p ol em {text-decoration: underline;}' – Flowen

+1

Также не может 'p' иметь «ol» в качестве ребенка (или любого потомка, если на то пошло), и не может «ol» иметь «em» в качестве ребенка. – BoltClock

ответ

2

Вы не можете, потому что HTML недопустим. ПР не может быть потомком П.

http://www.w3.org/TR/html-markup/p.html

A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element. 

Так

<p class="note"> 
<ol> 
    <li>One</li> 
    <li><em>Two</em></li> 
    <li>Three</li> 
    <li>Four</li> 
</ol> 

и

<p class="note"></p> 
<ol> 
    <li>One</li> 
    <li><em>Two</em></li> 
    <li>Three</li> 
    <li>Four</li> 
</ol> 

в основном то же самое.

+0

Спасибо, понял. Думаю, это был плохо сформулированный вопрос. –

0

Оператор> получает только элементы на первом уровне. Когда они обертываются каким-либо другим элементом, например диапазоном, селектор не работает. Просто используйте

.note p ol em { text-decoration: underline; } 

Пример:

<div class="test"> 
    <div> 
    <span></span> 
    </div> 
    <span class="example"></span> 
</div> 

div.test > span {} /* Only works for the span with the example class */ 
div.test span {} /* Works for both spans */ 
+0

Я понял пример, но ваше решение не сработало ... –

0
.note>p>ol em 

Просто удалите последний>

Или добавить класс в список и сделать

.class em (лучше)

+0

Задача состоит в том, чтобы написать файл CSS для стилизации HTML-файла, а не для изменения HTML-файла. «.note> p> ol em» не сработал ... –

0

Подчеркивание em текст в ol в table в div.note:

.note table ol em { 
    text-decoration: underline; 
} 

JS Fiddle demo.

Я ушел из неявных элементов, потому что я предполагаю, что правильный HTML, поэтому em может только быть в пределах li внутри от ol; ol сам может только быть в пределах td (или th) внутри table.

tableне может быть в пункте (а если вы попробовать поставить его в пункте браузер будет перемещать этот элемент, непредсказуемо, но будет быть перемещены, так как он будет создавать только действительное дерево DOM).

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