3

すべてをオーバーライドせずに要素の CSS ルールを中和する方法はありますか?

たとえば、私は Twitter Bootstrap を使用しており、table. いくつかの場所では、私はそれらを望んでいません。

特定のtable要素について、次のようなことができるかどうか疑問に思っています。

<table style="default"></table>
4

4 に答える 4

7

Bootstrap には、要素の CSS が少ししかありません。<table>

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

これらをオーバーライドするには、strapless などと呼ばれるテーブルのクラスを作成できます。

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

このセレクターはより具体的であるため、ブートストラップで使用されるtable.straplessセレクターをオーバーライドします。table

css クラスを使用するには、テーブルの class 属性に含めます。

<table class="strapless">
于 2012-05-06T21:20:58.783 に答える
1

オーバーライドせずに CSS ルールを中和することはできません。したがって、上記の回答で提案したようにする必要があります。

于 2012-05-06T21:49:04.397 に答える
0

CSS でクラスを使用して、さまざまなテーブル要素をターゲットにします。

table.black {
    background-color:black;
}

table.default {
    background-color:white;
}

次に、テーブル要素をグループ化し、要素自体に適切なクラス属性名を与えるだけで、適用する特定のスタイルを適用できます。

<table class="default">

<table class="black">

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

于 2012-05-06T21:09:04.660 に答える
0

Web サイトの CSS は、適切な量がある場合は、おそらく外部スタイルシートに含まれている必要があります。このスタイルシートでは、必要な CSS ルールを追加できるクラス名をテーブルに付けるという、他の人が提案することを行います。

しかし、mysite.css スタイルシートで新しく適用した CSS ルールで Bootstrap のスタイルシートをオーバーライドするための本当の鍵は、このスタイルシートを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>

外部スタイルシート ルートに行きたくない場合は、質問で提案したように「インライン」ルールを使用しても機能します (つまり、bootstrap.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>
于 2012-05-06T21:31:04.213 に答える