我正在尝试将侧面面板列表上的复选框涂成灰色。
当我单独编写代码时，此方法有效。但是，在使用SCSS时，我试图将元素分组在一起，并用逗号分隔类，但没有结果。
.checkbox-event-type-trainings
.checkbox-event-type-medizinisch
.checkbox-event-type-spiele
.checkbox-event-type-tests
.checkbox-event-type-andere
.checkbox-container .checkmark {
background-color: var(--dark-04);
}
我的变量文件。
:root {
--color-white: #fff;
--color-light-grey: grey;
--color-medium-dark-grey:#282c34 ;
--color-medium-dark-grey2: #32323b;
--color-dark-grey: #24242b;
--color-dark-grey-ten-percent-darker: #191922;
--color-black: #000;
--color-yellow: #fbc337;
--color-yellow-ten-percent-darker: #e2b031;
--color-green: #43ac43;
--main-bg-color: var(--color-medium-dark-grey);
--navbar-bg-color: var(--color-dark-grey);
--calendar-border-color: var(--color-dark-grey);
--calendar-background-color: var(--color-medium-dark-grey2);
--base-font-size: 12px;
--primary-font-color: var(--color-light-grey);
--secondary-font-color: var(--color-white);
--highlight-font-color: var(--color-yellow);
--highlight-font-color-ten-percent-darker: var(--color-yellow-ten-percent-darker);
/* events*/
--event-type-trainings-color: rgba(67, 172, 67, 1);
--event-type-trainings-color-with-opacity: rgba(67, 172, 67, 0.5);
--event-border-type-trainings: solid 1px var(--event-type-trainings-color-with-opacity);
--event-bg-color-type-trainings: rgba(67, 172, 67, 0.2);
--event-bg-color-type-trainings-selected: rgba(67, 172, 67, 0.4);
--event-type-medizinisch-color: rgba(189, 0, 38, 1);
--event-type-medizinisch-color-with-opacity: rgba(189, 0, 38, 0.5);
--event-border-type-medizinisch: solid 1px var(--event-type-medizinisch-color-with-opacity);
--event-bg-color-type-medizinisch: rgba(189, 0, 38, 0.2);
--event-bg-color-type-medizinisch-selected: rgba(189, 0, 38, 0.4);
--event-type-spiele-color: rgba(251, 195, 55, 1);
--event-type-spiele-color-with-opacity: rgba(251, 195, 55, 0.5);
--event-border-type-spiele: solid 1px var(--event-type-spiele-color-with-opacity);
--event-bg-color-type-spiele: rgba(251, 195, 55, 0.2);
--event-bg-color-type-spiele-selected: rgba(251, 195, 55, 0.4);
--event-type-tests-color: rgba(95, 151, 250, 1);
--event-type-tests-color-with-opacity: rgba(95, 151, 250, 0.5);
--event-border-type-tests: solid 1px var(--event-type-tests-color-with-opacity);
--event-bg-color-type-tests: rgba(95, 151, 250, 0.2);
--event-bg-color-type-tests-selected: rgba(95, 151, 250, 0.4);
--event-type-andere-color: rgba(215, 215, 215, 1);
--event-type-andere-color-with-opacity: rgba(215, 215, 215, 0.5);
--event-border-type-andere: solid 1px var(--event-type-andere-color-with-opacity);
--event-bg-color-type-andere: rgba(215, 215, 215, 0.2);
--event-bg-color-type-andere-selected: rgba(215, 215, 215, 0.4);
}
_variables.css
$color-white: #fafafa;
$color-grey-light: #ffffff;
$color-yellow: #fbc337;
$color-yellow-light: #f3c95f;
$color-primary: #292930;
$color-primary-darker: #24242b;
$color-secondary: #32323b;
// -------------------------------- from Django project ----------------------------------------
@import url(https://fonts.googleapis.com/css?family=Hind);
//Fonts
$font-hint: "Hind";
// Colors
$color-dark-gray: #2d2d2d;
$color-light-gray: #4f4f4f;
$color-custom-white: rgba(250, 250, 250, 1);
$color-custom-yellow: #fbc337;
$color-white-opacity-80: rgba(250, 250, 250, 0.8);
$color-white-opacity-50: rgba(250, 250, 250, 0.5);
$color-white-opacity-30: rgba(250, 250, 250, 0.3);
$color-white-opacity-10: rgba(250, 250, 250, 0.1);
$color-light-gray-opacity-75: rgba(215, 215, 215, 0.75);
$color-black-opacity-10: rgba(0, 0, 0, 0.1);
$color-black-opacity-16: rgba(0, 0, 0, 0.16);
$color-black-opacity-30: rgba(0, 0, 0, 0.3);
$color-black-opacity-50: rgba(0, 0, 0, 0.5);
$color-gray-border: #707070;
$color-dark-purple: #24242b;
$color-dark-purple-opacity-50: rgba(36, 36, 43, 0.5);
$color-light-purple: #32323b;
$color-neutral-purple: #292930;
$color-neutral-purple-opacity-90: rgba(41, 41, 48, 0.9);
$color-neutral-purple-opacity-80: rgba(41, 41, 48, 0.8);
$color-doctor: #fb3771;
$color-trainer: #78b782;
$color-physio: #8ebfff;
$color-green-button: #74bd77;
$color-header-label: #525259;
$training-03: #43ac43;
$training-03-opacity-30: rgba(67, 172, 67, 0.3);
$medical-01: #fc4445;
$medical-02: #bd0026;
$medical-03-opacity-30: rgba(252, 68, 69, 0.3);
$playerdev-01: #5f97fa;
$playerdev-01-opacity-30: rgba(95, 151, 250, 0.3);
$shade-dark: #d7d7d7;
$gold-03: #fff6a7;
$dark-04: #525259;
// Common styles
$border-radius: 5px;
$margin-between-element: 15px;
$margin-end-of-page: 50px;
$navbar-height: 5rem;
当我分别键入它们时（.checkbox-event-type-andere .checkbox-container .checkmark { 背景颜色： ; }），例如，它可以工作，但不能成组使用。我到底在做什么错？
任何建议都非常感谢。
答案 0 :(得分：0)
仅是一个建议，但您是否尝试过在组声明中用逗号分隔每个类名？
.checkbox-event-type-trainings,
.checkbox-event-type-medizinisch,
.checkbox-event-type-spiele,
.checkbox-event-type-tests,
.checkbox-event-type-andere,
.checkbox-container, .checkmark {
background-color: var(--dark-04);
}
像这样，可能有效（尽管未测试）
答案 1 :(得分：0)
您应该在类名之间添加,，否则将查找具有所有类的元素
类似
.checkbox-event-type-trainings,
.checkbox-event-type-medizinisch,
.checkbox-event-type-spiele,
.checkbox-event-type-tests,
.checkbox-event-type-andere,
.checkbox-container,
.checkmark {
background-color: var(--dark-04);
}
，或者如果checkmark类名被应用，则列出的类：
.checkbox-event-type-trainings,
.checkbox-event-type-medizinisch,
.checkbox-event-type-spiele,
.checkbox-event-type-tests,
.checkbox-event-type-andere,
.checkbox-container {
.checkmark{
background-color: var(--dark-04);
}
}