2012-05-06 10 views
3

要素のCSSルールをすべて無効にすることなく中和する方法はありますか?オーバーライドせずにCSS定義を中和する方法

私は、Twitter Bootstrapを使用しており、tableの多くの定義済みCSS定義があります。いくつかの場所では、私はそれらを望んでいません。

<table style="default"></table> 
+0

あなたは単にブートストラップのテーブル部分を削除できませんか? –

+0

私は別の場所でそれを使用するので、私はそれをしたくない... – sh3211

+0

[CSSルールを無効にする方法?](http://stackoverflow.com/questions/4396848/how-to-disable-a -css-rule) – random

答えて

1

whithoutオーバーライドあなたはCSSルールを中和することはできません。だからあなたは上記の答えで示唆したようにしなければなりません。

0

が異なるテーブル要素をターゲットに、あなたのCSSでクラスを使用します。私はこのような何かを行うことができれば

特定 table要素で

、私は思ったんだけど。

table.black { 
    background-color:black; 
} 

table.default { 
    background-color:white; 
} 

はその後、グループ、あなたのテーブル要素とあなたがそれらを適切なクラスを与えることによって、単に適用しようとする特定のスタイルを適用するには、要素自体の属性名をすることができます。

<table class="default"> 

<table class="black"> 

これは、CSSのクラス定義は、要素の定義を上書きすることに注意することも重要です。経験則としては、より具体的なCSSセレクタがあまり特定のセレクタをオーバーライドすることです。したがって、何らかの理由で元のCSSファイルを変更したくない場合は、新しいCSSファイルからさまざまなCSSスタイルを適用できます。もちろんこれは、従来のCSSには、まだtable.defaultルールとtable.blackルールがないと仮定しています。

+1

あなたがそうすることができることは明らかです。問題は、一度に多くの設定を中和できるかどうかということでした。あなたの言葉から私たちはそれをすることができないと理解しています。 – sh3211

7

ブートストラップが<table>要素のCSSのonly a little bitがあります

table { 
    max-width: 100%; 
    background-color: transparent; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

これらのあなたのテーブルのためのクラスを作ることができ上書きするには、ストラップレスか何かと呼ばれる:

table.strapless{ 
    max-width: 100%; 
    background-color: transparent; 
    border-collapse: separate; 
    border-spacing: 2px; 
    border-color: gray; 
} 

このtable.straplessセレクタが優先されますブートストラップによって使用されるtableセレクタはmore specificです。 CSSクラスを使用するには

は、あなたのテーブルのclass属性に含める:それのまともな量があるように起こっている場合

<table class="strapless"> 
0

あなたのウェブサイトのCSSは、おそらく外部スタイルシートにする必要があります。このスタイルシートでは、あなたが望むCSSルールを追加できるクラス名をテーブルに与えることを提案します。

しかし、あなたの、mysite.cssで新しく適用されるCSSルール(S)とブートストラップのスタイルシートを無効にするために、その後、実際のキー、スタイルシートはさらにダウンあなたのHTMLページ上よりを配置するには、このスタイルシートのためでありますbootstrap.cssファイルのものです。このように:

外部:あなたは、あなたが動作するあなたの質問で提案されているように「インライン」のルールを使用して、外部スタイルシートのルートを移動したくない場合は

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="/assets/css/mysite.css" rel="stylesheet" type="text/css"> 
</head> 
</html> 

(すなわち、ブートストラップをオーバーライドします。あまりにもCSS):

インライン:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <table> 
     <tr> 
     <td style="border-top: 1px solid red;"></td> 
     <td></td> 
    </tr> 
    </table> 
</body> 
</html> 
関連する問題