如何为<kbd>标签配置不同的css

Question

在grails项目中，我有一个如下所示的css来覆盖默认的kbd配置。

.tool-preview kbd {
    display: inline-block;
    width: 45px;
    font-size: 10px;
    text-align: right;

和像这样的gsp

<div class="custom-indicators-row-one">
    <div class="indicator-1 pull-left" >
        <kbd></kbd>
    </div>

    <div class="indicator-2 pull-right" >
        <kbd></kbd>
    </div>
</div>

有一个javascript将填充kbd标签的值。假设我希望div class="indicator-1 pull-left"和div class="indicator-2 pull-right"下的值具有不同的宽度，该如何实现呢？目前，对kbd css的任何宽度更改都会影响gsp中具有kbd的这两个div。

Answer 1

您可以像这样编写css

.indicator1 kbd{
/*your css*/
width: 300px;
}

.indicator2 kbd{
/*your css*/
width: 400px;
}

我想这对你来说是可行的。