CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

Question

为什么样式标签需要包含在Pure CSS框架的HTML中？ 文档也有它http://purecss.io/buttons/我正在看“带圆角的彩色按钮：成功按钮”部分

（看看这个Codepen - 在左下角点击编辑笔）

注意你是否取消注释它工作的HTML中的样式标签？ 为什么不能从css文件中取出它？

<style scoped>

    .button-success,
    .button-error,
    .button-warning,
    .button-secondary {
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .button-success {
        background: rgb(28, 184, 65); /* this is a green */
    }

    .button-error {
        background: rgb(202, 60, 60); /* this is a maroon */
    }

    .button-warning {
        background: rgb(223, 117, 20); /* this is an orange */
    }

    .button-secondary {
        background: rgb(66, 184, 221); /* this is a light blue */
    }

</style>

<div>
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>

Answer 1

CSS规则是根据它们的加载顺序分配的。 您将Yahoo Pure CSS文件加载到该 CodePen 的<body>中，但是您在CSS部分中键入的CSS在它之前加载 （在<head> ）。 这允许后者覆盖它，将设置恢复为默认值。

CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-01-25 05:32:51

只需在其他文件之前加载纯文件（但当然是在字体之后）。

CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-01-25 05:32:51

只需在其他文件之前加载纯文件（但当然是在字体之后）。

解决方案1
2 已采纳 2014-01-25 05:32:51