Question

有一个我们无法改变HTML的网页，但我们可以添加自定义CSS。我的问题是将CSS设置为div class =“pull-right”，但它只能应用于div类“col-sm-6 col-xs-12”中的“pull-right”类，因为有不同页面上的div也使用相同的类名。我以为我可以使用：

.col-sm-6.col-xs-12.pull-right {
position: absolute;
left: 21%;
top: 600%;
}

但没有任何反应（但是如果我只使用.pull-right {...但是也会影响其他页面，它会起作用）。下面是代码，适当的CSS将如何？：

<div class="col-sm-6 col-xs-12">
<div class="pull-right" style="display: table; padding-bottom: 8px;">
    <span style="display: table-cell; padding-right: 1em; width: 90px; vertical-align: middle;">kr 115,00 x</span>
    <span style="display: table-cell; width: 75px; border: 1px solid rgb(255, 255, 255); text-align: center; vertical-align: middle;">1</span>
    <span style="display: table-cell; padding-left: 1em; width: 95px; text-align: right; vertical-align: middle;">= kr 115,00</span>
</div>

Answer 1

这将是：

.col-sm-6.col-xs-12 .pull-right {
    position: absolute;
    left: 21%;
    top: 600%;
}

只有在将类应用于同一元素时才会将类连接在一起。在处理前面元素的子元素时用空格分隔。

Answer 2

由于.pull-right是.col-sm-6.col-xs-12的直接子项，我会使用此选择器：

.col-sm-6.col-xs-12 > div.pull-right {
  [...]
}

当其他地方存在一个类名时，如何在div类中CSS一个div类？

2 个答案: