如何将 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 中的 sn-p 具有 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*/;
}

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