html - cssスタイルを上書きする方法

Question

私はページを開発しています、今私のcssスタイルで私はこのコード行を持っています

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

私のページのために。今、私のページのいくつかはこの行を必要としません

width: 25%;
float: left;

ページの内部CSSで上書きできる可能性があります。これにより、元の動作が無視されますか？

score 88 · Accepted Answer

使用!importantはお勧めしませんが、この状況ではあなたがすべきだと思います-

これを内部CSSに記述します-

.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
}

score 9 · Accepted Answer

上書きする代わりに、別のcssとして作成し、要素内で他のcss（複数のcss）として呼び出します。
何かのようなもの：

.flex-control-thumbs li 
{ margin: 0; }

内部CSS：

.additional li
{width: 25%; float: left;}

<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */

score 5 · Accepted Answer

もう1つのクラス命名を作成できます

.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}

以下のようにオーバーライドする必要があるときはいつでも、このクラスを追加してください。

<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>

そして、あなたが他のものを必要としないときはいつでも削除してください<li>

score 3 · Accepted Answer

3

追加するだけ

.flex-control-thumbs li {
width: auto; 
}

于 2012-10-29T07:02:32.023 に答える

score 3 · Accepted Answer

はい、できます。私が考えることができるこれを達成するための3つの方法があります。

ノート：

score 2 · Accepted Answer

外部スタイルシートの後に必要なページにスタイルを追加して、最初のルールセットをカスケードして上書きすることができます。

<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
  width: auto;
  float: none;
}
</style>

score 2 · Accepted Answer

CSSの特異性を高める

例：

.parent-class .flex-control-thumbs li {
  width: auto;
  float: none;
}

デモ：

.sample-class {
  height: 50px;
  width: 50px;
  background: red;
}

.inner-page .sample-class {
  background: green;
}

<div>
  <div class="sample-class"></div>
</div>

<div class="inner-page">
  <div class="sample-class"></div>
</div>