如何更改<kbd>中的颜色？

Question

如何更改<kbd>中的颜色？

这是我的代码：

<a class="navbar-brand" href="#"><kbd><?php echo $x; ?></kbd></a>

Answer 1

使用以下内容更改<kbd>元素的颜色：

.navbar-brand kbd {
  background-color: lightblue;  // Changes background color
  color: #333;                  // Changes text color
}

Answer 2

要获得进一步参考以及OP问题中的twitter-bootstrap标记，我认为正确的方法是使用已加载的Bootstrap Helper classes。

• 要更改颜色，请使用Contextual colors
• 要更改背景，请使用Contextual backgrounds
• 要更改所有相关内容，请使用Labels或Alerts ^{（但label/alert中没有kbd课程< / EM>}

  

有关实例，请参阅以下代码段。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h3>Default, no class</h3>
<kbd>default</kbd>
<hr />
<h3>Only background</h3>
<kbd class="bg-muted">bg-muted</kbd>
<kbd class="bg-primary">bg-primary</kbd>
<kbd class="bg-success">bg-success</kbd>
<kbd class="bg-info">bg-info</kbd>
<kbd class="bg-warning">bg-warning</kbd>
<kbd class="bg-danger">bg-danger</kbd>
<hr />
<h3>Only text</h3>
<kbd class="text-muted">text-muted</kbd>
<kbd class="text-primary">text-primary</kbd>
<kbd class="text-success">text-success</kbd>
<kbd class="text-info">text-info</kbd>
<kbd class="text-warning">text-warning</kbd>
<kbd class="text-danger">text-danger</kbd>
<hr />
<h3>All (with label)</h3>
<kbd class="label-default">Default</kbd>
<kbd class="label-primary">Primary</kbd>
<kbd class="label-success">Success</kbd>
<kbd class="label-info">Info</kbd>
<kbd class="label-warning">Warning</kbd>
<kbd class="label-danger">Danger</kbd>
<hr /><h3>All (with alert)</h3>
<kbd class="alert-muted">alert-muted</kbd>
<kbd class="alert-primary">alert-primary</kbd>
<kbd class="alert-success">alert-success</kbd>
<kbd class="alert-info">alert-info</kbd>
<kbd class="alert-warning">alert-warning</kbd>
<kbd class="alert-danger">alert-danger</kbd>

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种方法是在<kbd>标记中添加类。使用它，您可以直接访问<kbd>标记。

.navbar-brand {
  background-color: lightblue;  // Changes background color
  color: #333;                  // Changes text color
}

html代码是

<a href="#"><kbd  class="navbar-brand"><?php echo $x; ?></kbd></a>