jQueryのキーボードCSSは

Question

スタックOverflowersを失敗し、

私はCSSで苦労を抱えている、それは、特定のクラスでボタンに色を割り当てることについて、かなり直です前方により多くのコードが含まれていますが、これは私が今興味を持っている唯一のものです、link to jsfiddle。

私は「」は、このボタンはいくつかのクラスがあるボタンに黒い色を割り当てる：そう黒い色を割り当てるには、Firefoxの「インスペクタに応じclass="ui-keyboard-button ui-keyboard-a ui-state-default ui-corner-all"を、私はいくつかのことを試してみた：

.ui-keyboard-button .ui-keyboard-a .ui-state-default .ui-corner-all { color: black; }

.ui-widget-content .ui-state-default .ui-keyboard-a

ui-keyboard-aとui-keyboard-button

何も機能していないと2つのだけ最後のバージョンではそれがで示されそれを通る十字架を持つ検査官。

ボタンに何かを割り当てる方法を知っている人はいますか？前もって感謝します！

Answer 1

これは、クラス宣言のルールの1つがcss precedenceのためにルールをオーバーライドしているために発生しています。

color: black !important;を使用すると問題は解決しますが、ウェブデザインに不確実性をもたらし、他のウェブページのレイアウトを意図せずに破る可能性があるため、これをおすすめしません。それはまた、悪い設計の習慣と考えられている。ただし、some casesでは自由に使用できます。

!importantを使用しない場合は、this投稿を参照してください。 CSS specificityについてもっと学ぶことで、今後CSSの真のパワーを活用するのに役立ちます。

ここにはfiddleがあり、作業スニペットは次のとおりです。追加

$(function() { 
 

 
    $("#keyboard").keyboard({ 
 
     visible: function(e, keyboard, el) { 
 
     // set up clicky noise after keyboard has been rendered and visible 
 
     }, 
 
     language: ["nl"], 
 
     rtl: false, 
 
     layout: 'custom', 
 
     customLayout: { 
 
     
 
     \t default: [ 
 
     '', 
 
     '', 
 
     \t '- \t a e i o u {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}', 
 
     \t '\u2015 aa ee oo uu {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}', 
 
     \t '{empty} a e o u {empty} {empty} {empty} {empty} {empty} t d ch g', 
 
     \t '\u2016 oe ui eu uw ie {empty} {empty} {empty} {empty} p b r l', 
 
     \t '|| au ou ei ij {empty} {empty} {empty} {empty} {empty} s z n m', 
 
     \t '||| aai ooi oei ouw auw {empty} {space} {empty} f v ng nk', 
 
     \t '|||| ieuw eeuw {empty} {empty} {empty} {empty} {empty} {empty} {empty} j w h k' 
 
     \t ] 
 
     
 
     }, 
 
     alwaysOpen: true, 
 
     initialFocus: true, 
 
     stayOpen: true, 
 
     userClosed: true, 
 
     ignoreEsc: true, 
 
     usePreview: false 
 
    }) 
 
    // activate the typing extension 
 
    .addTyping(); 
 

 
});

button.ui-keyboard-button { 
 
    color: black !important; 
 
} 
 

 
body { 
 
    font-size: 20px; 
 
} 
 

 
textarea { 
 
    width: 99%; 
 
    height: auto; 
 
} 
 

 
#wrap { 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: auto; 
 
} 
 

 
.ui-keyboard { 
 
    \t /* include the following setting to place the 
 
\t keyboard at the bottom of the browser window */ 
 
\t width: 99%; 
 
\t height: auto; 
 
\t left: 0px; 
 
\t top: auto; 
 
\t position: fixed; 
 
    bottom: 0; 
 
\t /* see issue #484 */ 
 
\t -ms-touch-action: manipulation; 
 
\t touch-action: manipulation; 
 
    } 
 

 
.ui-keyboard-button { 
 
    width: 3em; 
 
} 
 

 
.ui-keyboard-space { 
 
\t width: 6em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet"/> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script> 
 
<div id="wrap"> 
 
<textarea id="keyboard"></textarea> 
 
</div>

Answer 2

てみてください最後に重要なのは、例えば：！

.ui-keyboard-button .ui-keyboard-a .ui-state-default .ui-corner-all 
{ 
    color: black !important; 
} 

理由はそれのルックスであなたには、いくつかのテーマのスタイルを上書きしようとしているということで、これおそらくより高い特異性を有するであろう。また、Firefoxのインスペクタを調べて、探しているボタンと一致するCSSクラスを見つける必要があるかもしれません：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector