下面是我的 CSS 和 HTML 代码。
当 INPUT
和 SPAN
标签之间有一个 hidden
字段时,不应用给定的 CSS 选择器
CSS
input[type="checkbox"] + .lbl:before {
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
}
CSS 工作
<label>
<input name="SMS" type="checkbox" />
<span class="lbl"> choice 2</span>
</label>
未应用 CSS
<label>
<input name="SMS" type="checkbox" />
<input type="hidden" value="false" name="SMS">
<span class="lbl"> choice 2</span>
</label>
如何更改/添加新的 CSS 选择器更改以支持这两种情况?
注意 Hidden
字段是由ASP.Net MVC
框架自动生成的,我们无法将其放置在其他地方
最佳答案
+
表示元素紧跟在复选框之后。
您可以将其更改为 >
,表示父级。
input[type="checkbox"] > .lbl:before {
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
}
注意:我添加了一个新的 div
并将其用作父元素。
div > .lbl {
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
}
您还可以通过为您的 span
提供一个 ID,然后根据它进行选择来使用单个选择器。
关于html - CSS 选择器和 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16874184/