我有一個(gè)& lt標(biāo)簽& gt包裝復(fù)選框的標(biāo)記。如果復(fù)選框被選中，我想為該標(biāo)簽定義一個(gè)樣式。到目前為止，我一直依賴JavaScript，但是我發(fā)現(xiàn)有一個(gè):has選擇器，它可能只對CSS做我想做的事情

這是我的HTML:

<label><input type="checkbox name="param1"> Param 1</label>

以下是我在CSS中嘗試的內(nèi)容:

label:has(input[type='checkbox']:checked){
    background-color: #ccc;
}

然而，在我開始在瀏覽器中測試它之前，它就破壞了我的SCSS編譯器。我猜想有一個(gè)CSS語法錯誤。盡管有錯誤，我的編輯還是強(qiáng)調(diào)了這一點(diǎn)，但我看不出哪里錯了。

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

你可以像這樣使用:

input[type='checkbox'] {
  display:none;
}
label{
  height:30px;
  width:30px;
  border:1px solid red;
  display:inline-block;
}
input[type='checkbox']:checked + label{
  background-color: #000;
}

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

是的，css有:有選擇器，但是沒有瀏覽器支持它。

我希望，這對你有所幫助:

input:checked + label {
  color: red;
}

<input type="checkbox" name="param1" id="rad">
<label for="rad">Param 1</label>

但是如果標(biāo)簽包裝了輸入呢？ & lt標(biāo)簽& gt& lt輸入類型= & quot復(fù)選框名稱= & quot參數(shù)& quot& gtParam 1 & lt/label & gt；