html - 如何在特定的 标签中定义外部 css 文件

Question

我的元素中有不同类型的 css 文件。我只想定义一个名称为 register.css 的 css对于特定的 <div>以 registerForum 命名。

我可以定义 scss main.css 中的文件作为 import 中的链接注释并通过 extend 定义它registerForum 中的注释在 main.css 中定义.我可以使用下面显示的代码片段，但它不起作用。

ma​​in.css

@import "./css/bootstrap.min3.3.0.scss" 

#registerForum {
  @extend .reg-forum;
}

bootstrap.min3.3.0.scss

 .reg-forum {a { background-color:transparent;

    }

    a:active, a:hover {
        outline: 0;
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    b, strong {
        font-weight: bold;
    }

    dfn {
        font-style: italic;
    }

    h1 {
        margin: .67em 0;
        font-size: 2em;
    }

    mark {
        color: #000;
        background: #ff0;
    }

    small {
        font-size: 80%;
    }

    sub, sup {
        position: relative;
        font-size: 75%;
        line-height: 0;
        vertical-align: baseline;
    }

    h1, .h1, h2, .h2, h3, .h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small,
        .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small {
        font-size: 65%;
    }

    h4, .h4, h5, .h5, h6, .h6 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small,
        .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small {
        font-size: 75%;
    }

    h1, .h1 {
        font-size: 36px;
    }

    h2, .h2 {
        font-size: 30px;
    }

    h3, .h3 {
        font-size: 24px;
    }

    @media ( min-width : 768px) {
        .dl-horizontal dt {
            float: left;
            width: 160px;
            overflow: hidden;
            clear: left;
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .dl-horizontal dd {
            margin-left: 180px;
        }
    }

    abbr[title], abbr[data-original-title] {
        cursor: help;
        border-bottom: 1px dotted #777;
    }

    .initialism {
        font-size: 90%;
        text-transform: uppercase;
    }

    @media ( min-width : 992px) and (max-width: 1199px) {
        .hidden-md {
            display: none !important;
        }
    }

    @media ( min-width : 1200px) {
        .hidden-lg {
            display: none !important;
        }
    }

    .visible-print {
        display: none !important;
    }

    @media print {
        .visible-print {
            display: block !important;
        }
        table.visible-print {
            display: table;
        }
        tr.visible-print {
            display: table-row !important;
        }
        th.visible-print, td.visible-print {
            display: table-cell !important;
        }
    }

    .visible-print-block {
        display: none !important;
    }

    @media print {
        .visible-print-block {
            display: block !important;
        }
    }

    .visible-print-inline {
        display: none !important;
    }

    @media print {
        .visible-print-inline {
            display: inline !important;
        }
    }

    .visible-print-inline-block {
        display: none !important;
    }

    @media print {
        .visible-print-inline-block {
            display: inline-block !important;
        }
    }

    @media print {
        .hidden-print {
            display: none !important;
        }
    }
}

Answer 1

好的，所以我根据您的问题更改更新了我的答案。

检查 this example .它显示了如何从导入的文件扩展类，然后在元素中使用新的类/id。我使用了您的 .reg-forum 类，但它在这个特定示例中并没有做太多事情。有一个名为 .red-big-text 的单独类，如您所见，它运行流畅。

您也可以直接在您的 div 上使用 .reg-forum 类，无需在另一个 id 上扩展它然后使用该 id，但这取决于您。