JQuery键盘css分配颜色的按钮(键)与某些类失败

Question

Stack Overflowers，

我有一个艰难的时间与CSS，它是关于分配一个颜色的按钮与一个特定的类，非常直接。有更多的代码涉及，但这是我现在唯一感兴趣的东西，链接到jsfiddle。

我想给按钮'a'分配颜色为黑色，这个按钮有几个类:根据Firefox' Inspector ' 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

没有任何作用，只有在最后两个版本中，它才会在检查器中显示，并通过一个叉。

你们有人知道如何给按钮赋值吗?提前感谢!

Answer 1

这是因为你的类声明中的一个规则由于css优先级而覆盖了你的规则。

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

请参考这篇文章来了解何时不使用!important。学习更多关于CSS特性的知识将帮助您在将来利用CSS的真正力量。

这是小提琴，下面给出了工作片段。

$(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>

Answer 2

尝试在末尾添加!important，例如:

.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