特定のHTML要素のみに外部スタイルシートをリンクする

Question

HTMLファイルの特定の要素のみに外部スタイルシートをリンクできますか？

私はこの試みた：あなたは何ができるか

<div id="main"> 
 
    <!-- I don't want to style .alert from the external css --> 
 
    <div class="alert alert-success" role="alert">I don't want to style this alert from the external css.</div> 
 
    <div id="preview"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- Specific Content Start - I want to style only this element with bootstrap --> 
 
    <h1>Bootstrap 3 - Specific Content</h1> 
 
    <!-- Specific Content End --> 
 
    </div> 
 
</div>

Answer 1

はソース.scssファイルから独自のブートストラップをコンパイルしています。 Limit the scope of bootstrap stylesを参照してください（実際にはブートストラップをフォークする必要はありませんが、それは過剰です）

ブートストラップのルールには、特定のセレクタがプレフィックスとして付いています。#preview ... soプロジェクトファイルの一部で

#preview .alert { 
    padding: $alert-padding-y $alert-padding-x; 
    margin-bottom: $alert-margin-bottom; 
    border: $alert-border-width solid transparent; 
    @include border-radius($alert-border-radius); 
} 

を使用すると、以下のようなものがあるでしょう：あなたの-カスタムbootstrap.cssがあなたのために、このようになりますの抜粋

あなたが必要となります

#preview { 
    @import (less) 'bootstrap.css'; 
} 

の設定プロセスを踏むビルドの手順などを確認してください - http://getbootstrap.com/getting-started/#grunt

ここでは、これを行って公開した人物ですが、自分のリポジトリに組み込みのアセットが表示されないので、ビルドを設定する必要があるようです少なくとも、チュートリアルの一部として機能します。https://github.com/homeyer/scoped-twbs