1

次のような CSS があります。

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #637356 0px solid;
}

これは、私の表の下の境界線 (表の上部にあるタブ) を表示および非表示にするために使用されます。そのため、Firefox では、active がクラス内にある場合、ベース css から取得した下の境界線が削除されるように正しく機能します。しかし、私の Chrome バージョンはそのようにはなっていません。

CSS を使用して、クラスでアクティブになっていない table.varTabs を選択するにはどうすればよいですか? （JQueryやHTMLに非アクティブなクラスを追加するのではなく、CSSアプローチが必要です）。

Chrome の場合 (不正解): http://screencast.com/t/sqJfWS6S Firefox の場合 (正解): http://screencast.com/t/kXPHPV6Hyao

use variables の下の行を参照してください。

4

3 に答える 3

2

table.varTabs th:not(.active)

ただし、これはcss3がサポートされている環境でのみ機能するはずです

于 2012-07-27T22:17:28.033 に答える
1

どういうわけかChromeのバグがあるので、私はこれをしました、そしてそれはうまくいきました:

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #fff 2px solid;
}

白い背景に他の境界線を上書きするために白い境界線を作成しました。

于 2012-07-27T22:57:00.753 に答える
0

table.varTabs thCSS ルールでターゲットを設定し、その後にtable.varTabs th.activeルールを配置して、アクティブなクラスに対して変更したいものをオーバーライドできます。この方法で使用する必要はなく:not、非常に古いブラウザと互換性があります。

table.varTabs th {
   /* regular and default rules here */
}

table.varTabs th.active {
   /* .active override rules here */
}
于 2012-07-27T22:18:25.063 に答える