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在其之前加载（在{ {1}}）。这允许后者覆盖，将设置恢复为默认设置。

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

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

1 个答案:

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