Css 为什么：只读选择器会影响没有只读属性的元素？

我有以下代码：

联系分支机构特定的电子邮件

将显示以下复选框：

该复选框使用以下CSS显示：

.check-box label:read-only:before {
    background-color: #eeeeee;
}

。复选框标签：在{
位置：绝对位置；
左：0；
顶部：2个；
边框：1px实心#dcdde3；
内容：''；
字体系列：Fontsome；
线高：14px；
颜色：#3d4964；
字体大小：11px；
文本对齐：居中；
光标：指针；
显示：块；
宽度：16px；
高度：16px；
}

因此，实际的复选框（输入）是隐藏的，上面的CSS在标签前添加了一个复选框。这一切都按预期进行

我想添加一个额外的CSS类，如果标签具有

readonly

属性，则将显示的复选框的颜色更改为浅灰色。因此，我添加了以下CSS：

.check-box label:read-only:before {
    background-color: #eeeeee;
}

但问题是，上面的CSS也会影响没有

只读属性的标签，我不明白为什么会这样

标记“标签”没有“只读”属性。请参阅html规范。如果要在输入具有“readonly”属性时更改标签的颜色，请执行以下操作：
.复选框输入[只读]+标签{
...
}“标签”没有“只读”属性。此外，“readonly”不适用于复选框输入类型。您可以对复选框使用“禁用”


var-button=document.getElementById（“toggleBtn”）；
var input=document.getElementById（“UseBranchSpecificContact”）；
addEventListener（“单击”，函数（）{
输入.toggleAttribute（“禁用”）；
});
。复选框标签：在{
位置：绝对位置；
左：0；
顶部：2个；
边框：1px实心#dcdde3；
内容：''；
字体系列：Fontsome；
线高：14px；
颜色：#3d4964；
字体大小：11px；
文本对齐：居中；
光标：指针；
显示：块；
宽度：16px；
高度：16px；
}
.复选框输入：禁用~标签：之前{
背景色：红色；
}

联系分支机构特定的电子邮件
切换禁用
谢谢，如果您可以提供任何参考/来源，这将有所帮助。还可以指出，
：只读
实际上是
：非（：读写）
，即所有不可编辑的元素都匹配。