Scoped CSSを使用せずに、多くの競合するCSSを含むページにコードを追加するにはどうすればよいですか？

Question

私は、すでに多くの競合するCSSを読み込んでいるページにタブのコードを追加しようとしています。私はdivクラスとラベルの名前を編集しようとしましたが、オリジナルはまだ私が追加しているコードと戦っています。 Scoped CSSはまだ広くサポートされていない点を除いて、完璧なソリューションになります。

その他のオプションはありますか？ここで

はJSフィドルです：https://jsfiddle.net/dcLjve28/1/ここ は私がより良いボックスを整理するにそれを追加するページです：それは膨大な量だとしてhttp://action.focallocal.org/

私はCSSがすでにページにロードされて含まれませんコード（誰かが尋ねていない限り）、しかし、私はJSフィドルにそれを好む私は誰のためにここでそれに追加するコード投稿します：

<div class="tabs"> 
    <!-- Radio button and lable for #tab-content1 --> 
    <input type="radio" name="tabs" id="tab1" checked > 
    <label for="tab1"> 
     <i class="fa fa-rocket" aria-hidden="true"></i> 
<span>Projects</span> 
    </label> 
    <!-- Radio button and lable for #tab-content2 --> 
    <input type="radio" name="tabs" id="tab2"> 
    <label for="tab2"> 
     <i class="fa fa-users" aria-hidden="true"></i><span>Flash-Mobs</span> 
    </label> 
    <!-- Radio button and lable for #tab-content3 --> 
    <input type="radio" name="tabs" id="tab3"> 
    <label for="tab3"> 
     <i class="fa fa-heartbeat" aria-hidden="true"></i><span>Movement</span> 
    </label> 
    <div id="tab-content1" class="tab-content"> 
     <h3>Positive Action Projects</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content1 --> 
    <div id="tab-content2" class="tab-content"> 
     <h3>Internatonal Positive Action Days</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 
    <div id="tab-content3" class="tab-content"> 
    <h3>Grow the Movement</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 

CSSを

.tabs { 
    max-width: 90%; 
    float: none; 
    list-style: none; 
    padding: 0; 
    margin: 75px auto; 
    border-bottom: 4px solid #ccc; 
} 
.tabs:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.tabs input[type=radio] { 
    display:none; 
} 
.tabs label { 
    display: block; 
    float: left; 
    width: 33.3333%; 
    color: #ccc; 
    font-size: 30px; 
    font-weight: normal; 
    text-decoration: none; 
    text-align: center; 
    line-height: 2; 
    cursor: pointer; 
    box-shadow: inset 0 4px #ccc; 
    border-bottom: 4px solid #ccc; 
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ 
    transition: all 0.5s; 
} 
.tabs label span { 
    display: none; 
} 
.tabs label i { 
    padding: 5px; 
    margin-right: 0; 
} 
.tabs label:hover { 
    color: #3498db; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
} 
.tab-content { 
    display: none; 
    width: 100%; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
    background-color:#ffffff; 
} 

.tab-content * { 
    -webkit-animation: scale 0.7s ease-in-out; 
    -moz-animation: scale 0.7s ease-in-out; 
    animation: scale 0.7s ease-in-out; 
} 
@keyframes scale { 
    0% { 
    transform: scale(0.9); 
    opacity: 0; 
    } 
    50% { 
    transform: scale(1.01); 
    opacity: 0.5; 
    } 
    100% { 
    transform: scale(1); 
    opacity: 1; 
    } 
} 

.tabs [id^="tab"]:checked + label { 
    background: #FFF; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
    color: #3498db; 
} 
#tab1:checked ~ #tab-content1, 
#tab2:checked ~ #tab-content2, 
#tab3:checked ~ #tab-content3 { 
    display: block; 
} 

@media (min-width: 768px) { 
    .tabs i { 
     padding: 5px; 
     margin-right: 10px; 
    } 
    .tabs label span { 
     display: inline-block; 
    } 
    .tabs { 
    max-width: 750px; 
    margin: 50px auto; 
    } 
} 

は親切にありがとう、 アンディ

Answer 1

では、要素自体をターゲットとの共通の解決策に追加し、クラス、AKA： 『p.paragraph』 VS「.paragraph」、あなたはまた、いくつかを強制することができ、重要なルールを！ ...あなたのコードをもっと開発するために少しスパゲッティにすることができます。もっとスタイルを固定しなければならないからです。私は、おそらくそれを保存するのに2番目の.cssファイルを作るのは良いことだと思います。それは見つけるのが簡単です。

実装は次のようにのようなものです：

p.pragraph { 
    font-size: 20px !important; 
    letter-spacing 1px !important; 
} 

基本的には、各スタイルの変更によって、前に "重要！" を追加します ";"。