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

Question

我有这个 CSS，正在寻找 smarter/better 的写法。

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 放在一个变量中？

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

Answer 1

根据评论更新了答案

您的 Q 中的代码段具有 button.btn 的共同点，因此您可以直接使用它，但根据您的评论，您在 [=13] 上不需要此样式=] 在这种情况下，您可以使用以下解决方案：

#1

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

此 CSS 将 select 所有 button.btn 元素，但带有 class .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 应用于元素的特定子元素

How to apply CSS to specific children of an element

javascript

css

scss-lint