2011-07-29 9 views
0

ボタンが無効になっていることがわかって何らかの理由で.paginate_buttonのCSSが表示され、.paginate_button_disabledのCSSが表示されます。なぜ誰が知っていますか?ページングボタンに無効なCSSが表示されない

.paginate_button_disabled { 
    border: 1px solid #F3F3F3; 
    color: #CCCCCC; 
    margin-right: 2px; 
    padding: 2px 5px; 
    border: 0;  
} 
.paginate_button:hover { 
    border:1px solid #52bfea; 
    color: #fff; 
    background-color: #52bfea; 
} 
.paginate_active { 
    padding: 2px 5px 2px 5px; 
    margin-right: 2px; 
    border: 1px solid #52bfea; 
    font-weight: bold; 
    background-color: #52bfea; 
    color: #FFF; 
} 
.paginate_button { 
    padding: 2px 5px 2px 5px; 
    margin-right: 2px; 
    color: #52BFEA; 
    border: 1px solid #52BFEA; 
} 

答えて

2

あなたが.paginate_buttonを削除せずに要素へ.paginate_button_disabledを追加していると仮定すると、あなたのCSSの順序を変更する必要があります。

.paginate_buttonルールが最初に来る必要があります:

.paginate_button { 
padding: 2px 5px 2px 5px; 
margin-right: 2px; 
color: #52BFEA; 
border: 1px solid #52BFEA; 
} 
.paginate_button_disabled { 
border: 1px solid #F3F3F3; 
color: #CCCCCC; 
margin-right: 2px; 
padding: 2px 5px; 
border: 0;  
} 
.paginate_button:hover { 
border:1px solid #52bfea; 
color: #fff; 
background-color: #52bfea; 
} 
.paginate_active { 
padding: 2px 5px 2px 5px; 
margin-right: 2px; 
border: 1px solid #52bfea; 
font-weight: bold; 
background-color: #52bfea; 
color: #FFF; 
} 

方法CSSの作品を、それが文書をダウンカスケードです。したがって、両方が同じ特異性を持つ場合、CSSルールの下限が勝ちます。それはCSS文書で、後に定義されている

1

あなただけ.paginate_buttonクラスを削除せずに、要素へ.paginate_button_disabledクラスを追加している場合は、後者が無効のルールを上書きする - 彼らは文字通りスタイルをカスケード接続されています。

0

最適な解決策は、不要なボタンを非表示にすることです。

は、次のコマンドを使用します。彼らが必要な場合にのみ、この場合

.paginate_button_disabled { 
    display: none; 
} 

以前に、次の、最初と最後のボタンが表示されます。

関連する問題