CSS继承：父母和孩子的孩子

任务：下划线强调“笔记”类的任何段落内有序列表中的文本。这是我到目前为止...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>

来源

2013-05-17 Joe Austin

，从我能想到的，您可以尝试的唯一事情是有空间... –

'。注意p醇EM更换> {文字装饰：下划线;}' – Flowen

既不可以了'p'作为一个孩子（或任何后裔）有一个'ol'，小孩也不能拥有'em'。 – BoltClock

你不能，因为HTML是无效的。该OL不可能的P.

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>

基本上是相同的。

来源

2013-05-17 15:41:01

谢谢，理解。我想这是一个很糟糕的问题。 –

>运算符仅获取第一级上的元素。当它们被任何其他元素包围时，例如选择器不起作用。只需使用

.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 */

来源

2013-05-17 14:52:57 Wipster

我理解的例子，但你的解决方案没有奏效... –

.note>p>ol em

只需卸下最后>，

或者添加一个类的列表，并做

.class em（更好的性能）

来源

2013-05-17 14:57:38 FLX

的任务是写一个CSS文件样式的HTML文件，而不是改变HTML文件。 “.note> p> ol em”没有工作... –

下划线的ol内em文本div.note内table内：

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

JS Fiddle demo。

我已经离开了隐含的元素，因为我假设有效的HTML，所以em可以只是ol内的li内;在table内，ol本身可以只有在td（或th）内。

的table不能是一个段落内（如果你尝试把它放在一个段落中的浏览器将移动该元素，不可预测的，但它将移动，因为它只会创造有效的DOM树）。

来源

2013-05-17 15:46:42

CSS继承：父母和孩子的孩子

回答

相关问题