JQuery клавиатуры CSS назначение цвета для кнопки (ключ) с определенным классом не удается

Question

стека Overflowers,

Я с трудом с помощью CSS, это о назначении цвета к кнопке с определенным классом, довольно неразветвленной вперед. Существует больше кода, но это единственное, что мне сейчас интересно, link to jsfiddle.

Я хочу, чтобы назначить цвет черный на кнопку «а», то эта кнопка имеет несколько классов: class="ui-keyboard-button ui-keyboard-a ui-state-default ui-corner-all" в соответствии с Firefox»инспектор, так, чтобы назначить цвет черный, я попробовал несколько вещей:

.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

Ничто не работает, и только в двух последних версиях это проявляется в InSpe ctor с крестом через него.

Кто-нибудь из вас знает, как назначить что-либо кнопке? Заранее спасибо!

Answer 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