Question

任何想法为什么'li'元素不会在以下片段中继承'p'元素样式？即'role1'和'role2'呈现为黑色，而'Hello world！'并且'Inside nested p'为蓝色。

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>
            Hello World !
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
        </p>
    </body>
</html>

Answer 1

Ya，Rick Hoving是对的。如果你想将蓝色应用于所有p和ol或者什么。您需要将其放入div块/容器中，如下所示。

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        div {
            color: blue;
        }
        </style>
    </head>
    <body>
    <div>
        <p>
            Hello World !
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
        </p>
    </div>
    </body>
</html>

Answer 2

p标记不能包含块级元素。所以浏览器会自动关闭p标签。你的html将解析如下：

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        p {
            color: blue;
        }
        </style>
    </head>
    <body>
        <p>
            Hello World !
        </p>
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
    </body>
</html>

现在你明白为什么Hello world和Inside嵌套p是蓝色而li元素不是

Answer 3

尝试在样式说明中使用您自己的自定义标记或类：

<!DOCTYPE html>
<html>
    <title>test</title>
    <head>
        <style type="text/css">
        custom {
            color: blue;
        }
        </style>
    </head>
    <body>
        <custom>
            Hello World !
            <ol>
                <li>role1</li>
                <li>role2</li>
            </ol>
            <p>
                Inside nested p
            </p>
        </custom>
    </body>
</html>

列表元素不从父项继承样式

3 个答案: