我以前從未使用過SCSS，我想知道它是否允許我根據(jù)里面的復(fù)選框是否被選中來設(shè)計(jì)一個(gè)元素的樣式。

例如，我有:

<label>
  <input type="checkbox"/>
</label>

我想先改變label::的內(nèi)容，然后再?zèng)Q定是否選中該框。

SCSS允許這樣的事情嗎？如果是，我該怎么做？

讓我考慮讓SCSS來執(zhí)行這個(gè)的原因是(如果我沒弄錯(cuò)的話)用SASS確實(shí)是可能的。 然而，由于我不熟悉SASS，我寧愿用SCSS做，因?yàn)檗D(zhuǎn)換我的文件顯然是非常容易的。

我對(duì)你的HTML做了一點(diǎn)改動(dòng)，但是我覺得真的能幫到你。

Sass代碼:

input[type=checkbox]
  + .checkbox-label
    color: blue
  &:checked + .checkbox-label
    color: red
    &:before
      content: ""
      border: 1px solid #a3adb3

input[type=checkbox]+.checkbox-label {
  color: blue;
}

input[type=checkbox]:checked+.checkbox-label {
  color: red;
}

input[type=checkbox]:checked+.checkbox-label:before {
  content: "";
  border: 1px solid #a3adb3;
}

<input type="checkbox" id="cbox1" value="first_checkbox">
<label for="cbox1" class="checkbox-label">Hello world</label>

不，沒有CSS選擇器允許根據(jù)子元素的狀態(tài)來設(shè)計(jì)元素的樣式。

更新:2022年引入了:has()偽類，截至2023年6月，除Firefox之外的所有主流瀏覽器都支持它。

現(xiàn)在，您可以根據(jù)子狀態(tài)設(shè)置父元素的樣式，如下所示:

label::before {
  content: 'Not checked';
}

label:has(input:checked) {
  background: yellow;
}

label:has(input:checked)::before {
  content: 'Checked!';
}

<label>
  <input type="checkbox" />
</label>

你不能根據(jù)輸入的狀態(tài)改變標(biāo)簽的內(nèi)容，你需要用JS來實(shí)現(xiàn)。

但是，您可以在常規(guī)ol CSS中使用偽選擇器(通過擴(kuò)展使用SCSS ),通過input:checked{}來設(shè)置復(fù)選框本身的樣式

編輯:我承認(rèn)錯(cuò)誤，看萊昂納多·科斯塔使用兄弟姐妹選擇器的解決方案。

從今天起，您可以使用新的:has()偽類作為父選擇器:

label:has(:checked)::before {
    content: "?";
    color: blue;
}