html - 列出不从父级继承样式的元素

标签 html css

知道为什么“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>

最佳答案

是的,Rick Hoving 是正确的。如果您想将蓝色应用于所有 p 和 ol 或任何其他颜色。您需要将其放入 div block /容器中,如下所示。

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

关于html - 列出不从父级继承样式的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9325835/

相关文章:

css - 谷歌浏览器背景渐变

javascript - 为什么 JQuery live() 可以工作,而 delegate() 不能工作?

PHP/HTML 动态页面/搜索

html - 如何点击模糊的太阳?

php - 您可以在 Wordpress 上添加自定义仪表板 Logo 吗?

css - 如何编辑 Bootstrap 以适应手机屏幕?

javascript - Bing Map api ajax v. 7 未显示

javascript - 在 bootstrap 3 词缀/scrollspy 上方添加未确定的空白

html - 底部 : 0 vs vertical-align: bottom

jquery - 如果元素没有特定类,如何使条件起作用,在我的例子中是 "active"?