Question

我的页面上有两个按钮：

<a class="paginate_button next" id="myTable_next" tabindex="0" data-dt-idx="1" aria-controls="myTable">Next</a>

<a class="paginate_button previous disabled" id="MyTable_previous" tabindex="0" data-dt-idx="1" aria-controls="myTable">Previous</a>

现在，我希望所有的paginate_buttons都具有相同的样式，但是如果它们是下一个按钮，它们会向右浮动，如果它们是前一个按钮，它们会向左浮动，如果它们被禁用，它们就是无形。

下面是我认为会实现的.CSS，但是，当我的按钮“禁用”类时，它仍然可见。我觉得.next .disabled类更改是个问题，但我不知道正确的语法是什么。

.paginate_button{
box-sizing: border-box;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
}

.paginate_button .next{
float: right;
}

.paginate_button .previous{
float: left;
}

.paginate_button .next .disabled{
visibility: hidden;
}

.paginate_button .previous .disabled{
visibility: hidden;
}

Answer 1

只需删除选择器之间的空格：

.paginate_button.next{

...

.paginate_button.previous {

...

等

Answer 2

只需省略这样的空格：

.paginate_button.next{
float: right;
}

如你所做的那样放置一个空格意味着下一个类的任何元素是类paginate_button的元素的后代（包含在其中）。没有空格，您可以指定类paginate_button和next。

的元素

Answer 3

简答：

只需删除像这样的选择器之间的空格

.paginate_button.next{--- your code ---}
.paginate_button.previous{--- your code ---}

<强>解释

案例1：

如果这两个选择器都是相同的元素，请执行以下操作：

<div class="selector1 selector2"> some code </div>

然后你必须像这样使用无空间：

.selector1.selector2{--- your code ---}

案例2：

如果两个选择器都是不同的元素，请执行以下操作：

<div class="selector1">
   <p class="selector2"> some code </p>
</div>

然后你必须使用空格，如下所示：

.selector1 .selector2{--- your code ---}

希望这会有所帮助：）

Answer 4

添加逗号并删除下一个上一个禁用的

上的paginated_button

.next{
float: right;
}

.previous{
float: left;
}

.disabled{
visibility: hidden;
}

如何使用.css仅设置子类的样式？

4 个答案: