0

为什么样式标签需要包含在纯 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>
4

1 回答 1

2

CSS 规则是根据加载顺序分配的。您将 Yahoo Pure CSS 文件加载<body>该 CodePen 中,但您在CSS 部分中键入的 CSS 会在它之前加载(在 中<head>)。这让后一个覆盖它,将设置恢复为默认值。

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

于 2014-01-25T05:32:51.050 回答