Question

任务：在'note'类的任何段落内的有序列表中强调文本。这就是我到目前为止......

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

Answer 1

你不能，因为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>

基本相同。

Answer 2

＆gt; operator只获取第一级的元素。当它们被任何其他元素（如span）包裹时，例如选择器将无法工作。只需使用

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

Answer 3

.note>p>ol em

只需删除最后一个＆gt;，

或者在列表中添加一个类并执行

.class em（表现更佳）

Answer 4

em中ol内table内的div.note文字加下划线：

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

JS Fiddle demo

我遗漏了隐含的元素，因为我假设有效的HTML，因此em只能位于{{1}内的li内}}; ol本身只能位于ol内的td（或th）内。

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

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

4 个答案: