Question

我有这个CSS并且正在寻找一种更聪明/更好的方式来编写它。

daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-secondary,
daypicker>table>tbody>tr>td>button.btn.btn-default.btn-info,
daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-info,
daypicker>table>tbody>tr>td>button.btn.btn-sm{
    padding: 0.25rem;
    font-size: 0.8rem;
}

Mayble我应该将daypicker>table>tbody>tr>td放在变量中吗？

从StackOverflow上的其他类似问题我明白我可以使用通用选择器，但在我的情况下不知道如何使用它。

Answer 1

根据评论更新了答案

Q 中的代码段有button.btn个共同点，所以您可以使用它，但根据您的评论，您不需要在button.btn.btn-sm.btn-danger上使用此样式在这种情况下，您可以使用此解决方案：

<强>＃1

 .daypicker>table>tbody>tr>td>button.btn:not(.btn-danger){
    padding: 0.25rem;
    font-size: 0.8rem;
 }

这个CSS会选择所有button.btn个元素，除了一个类别为.btn-danger的元素。 Refer link

<强>＃2

.daypicker>table>tbody>tr>td>button.btn{
    padding: 0.25rem;
    font-size: 0.8rem;
}


/*the style below will reset to your need for .btn-danger*/;

.daypicker>table>tbody>tr>td>button.btn.btn-danger{
   padding: /*your desired size*/;
   font-size: /*your desired size*/;
}

由您决定使用适合您要求的那个。希望这会对你有所帮助。

如何将CSS应用于元素的特定子元素

1 个答案: