javascript - クラスを割り当ててテーブルの境界線の色を変更する

Question

ボタンがクリックされたときに、表の特定の部分の境界線の色を変更したいと考えています。これはより大きなプロジェクトですが、ここで問題を再現することができました -

CSS:

table, tr, td
{
    border:1px solid #999;
    padding:8px;
    border-collapse: collapse;
    background-color: #FFF;
}

/*comment this line out and it works*/
#div1 table, #div1 td { border-color:White;}

.colorborder{border:1px solid Red}

css スタイル "table, tr, td" は、プロジェクト内のすべてのページで使用される css ファイルにあります。ただし、この特定のページでは、黒の境界線が必要ないため、「#div1 テーブル、#div1 td」というスタイルを追加することにしました (「border:none」を指定しても同じ効果があることに注意してください)。ただし、それを追加すると、jquery 操作が機能しなくなります。

誰が何が起こっているのか知っていますか？

score 10 · Accepted Answer

これは cssの特異性の問題です。#div1 tdブラウザーの DOM デバッガーを使用すると、スタイルがよりも優先されることがわかります.colorborder。これは、ID がクラスよりも具体的であるために発生します。

CSS を次のように変更してみてください。

#div1 td.colorborder{border:1px solid Red}

特異度を計算するための w3.org のルールは、こちらで読むことができます。CSS を使用して本格的な Web 開発を行う場合は、これがどのように機能するかを理解しておくとよいでしょう。

CSS の特異性の簡単な紹介

一般的に、知っておくべきことは次のとおりです。

要素名 (liやなどのタグ名td) の特異性は最も低いです...
[name=firstname]... クラスと属性 ( など)が続きます...
... ID が続きます ( など#div1)...
... インラインstyle="..."属性に最も高い特異性があります。

さらに、上記の複数のインスタンスには、より高い特異性が与えられます。したがって、あるスタイルがに割り当てられtable td、別のスタイルがに割り当てられてtable tbody tr tdいる場合、2 番目のスタイルが優先されます。これは、タグ名が多いほど、より具体的なものになるためです。

もちろん、!importantCSS で使用することでより高くすることができますが、これは特別な場合を除いて使用すべきではありません (たとえば、class="red"使用する場所に関係なく、を使用したものを赤くしたい場合など)。!importantそうしないと、特定性の規則に従って一方が他方をオーバーライドして、CSS 全体で蔓延して使用されていることに気付くでしょう。

score 1 · Accepted Answer

この行：

#div1 table, #div1 td { border-color:White;}

要素の ID (#) によって参照されるため、他のプレーンなクラスルールよりも階層が高くなります。

他のルールを機能させるには、ID セレクターをそれらに追加して、以前のルールの階層をオーバーライドできるようにする必要があります。

#div1 .colorborder{border:1px solid Red}

score 1 · Accepted Answer

特異性の問題があります。つまり、白色のセレクターは赤色よりも特異性が高いということです。

今すぐチェック: http://jsfiddle.net/RZ7UP/12/

score 0 · Accepted Answer

変化

#div1 table, #div1 td { border-color:White;}

に

table#div1, td#div1 { border-color:White;}

も動作します。

score 0 · Accepted Answer

あなたの問題はCSSにあり、jQueryではないと思います。

cssの最後の行... #div1 table.colorborder, #div1 td.colorborder{border:1px solid red} 理由は、ページのさらに下にある#div1かどうかに関係なく、IDセレクターがより優先されるためです....colorborder{...}

score 0 · Accepted Answer

0

それは、ID の方がクラスとして特異性が高いためです。

于 2012-08-01T13:24:21.413 に答える

javascript - クラスを割り当ててテーブルの境界線の色を変更する

6 に答える 6

Related

Reference