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

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;
}

也许我应该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 类的元素之外的所有元素。参考链接

#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*/;
}

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