javascript - JQuery 键盘 css 将颜色分配给具有特定类的按钮(键)失败

Question

堆栈溢出，

我在使用 CSS 时遇到了困难，它是关于为具有特定类的按钮分配颜色，非常简单。涉及更多代码，但这是我现在唯一感兴趣的，link to jsfiddle .

我想将黑色分配给按钮“a”，这个按钮有几个类: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 { 颜色:黑色; }

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

ui-keyboard-a 和 ui-keyboard-button

没有任何效果，只有在最后两个版本中，它才会在检查器中显示为带有叉号。

你们中有人知道如何为按钮分配任何东西吗？提前致谢!

Answer 1

发生这种情况是因为您的类声明中的规则之一由于 css precedence 而覆盖了您的规则.

使用 color: black !important; 会解决你的问题，但我不推荐这样做，因为它会给你的网页设计带来不确定性，并可能无意中破坏你的其他网页布局。它也被认为是一种糟糕的设计实践。然而，在 some cases你可以自由使用它。

请引用this发布以了解何时不使用 !important。了解更多关于 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: {
      
      	default: [
        '',
        '',
      	'- 	a e i o u {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}',
      	'\u2015 aa ee oo uu {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}',
      	'{empty} a e o u {empty} {empty} {empty} {empty} {empty} t d ch g',
      	'\u2016 oe ui eu uw ie {empty} {empty} {empty} {empty} p b r l',
      	'|| au ou ei ij {empty} {empty} {empty} {empty} {empty} s z n m',
      	'||| aai ooi oei ouw auw {empty} {space} {empty} f v ng nk',
      	'|||| ieuw eeuw {empty} {empty} {empty} {empty} {empty} {empty} {empty} j w h k'
      	]
        
      }, 
      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 {
  	/* include the following setting to place the
	keyboard at the bottom of the browser window */
	width: 99%;
	height: auto;
	left: 0px;
	top: auto;
	position: fixed;
  bottom: 0;
	/* see issue #484 */
	-ms-touch-action: manipulation;
	touch-action: manipulation;
  }

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

.ui-keyboard-space {
	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>