<div role="radiogroup" class="radio-group">
<label role="radio" aria-checked="true">
<span class="radio__input is-checked">
// 省略里面的内容
</span>
<span class="radio__label">备选项 1 </span>
</label>
<label role="radio">
<span class="radio__input">
// 省略里面的内容
</span>
<span class="radio__label">备选项 3 </span>
</label>
<label role="radio">
<span class="radio__input">
// 省略里面的内容
</span>
<span class="radio__label">备选项 3 </span>
</label>
</div>
如上 html 结构,现在想用 css 选择器实现选中当前被 checked 项中的文本 span 标签,即上面 备选项 1、备选项 2、备选项 3
对应 3 个 span
当前被 checked 的项会在给当前 lable 标签添加一个aria-checked="true"
属性,所以我现在可以通过label[aria-checked="true"]
选中被 checked 的 lable
需要选中的 span 是 lable 的第二个子元素,用nth-child(n)
不行,nth-child(n)是选择属于其父元素的第 n 个子元素的每个标签元素
直接通过span[class="radio__label"]
试了也不能选中所有 span
通过 jsdocument.getElementsByClassName("el-radio__label")
倒是可以选中所有的 span 标签,css 选择器如何实现呢?
客串前端,名次或术语用的不对的还请各位见谅!
1
vja 2018-11-23 11:58:53 +08:00 1
用 class 来选中不是这样的语法,你搞错了,用 class 选中应该是 span.radio__label
|
2
vja 2018-11-23 12:00:06 +08:00
如果是需要用`id`选中应该用`#`号,例如`div#fuck`
|
3
vja 2018-11-23 12:01:05 +08:00
|
4
P233 2018-11-23 12:52:25 +08:00 1
.is-checked + span
感觉 .radio__input 这个包裹并无必要,还可以 input:checked + span 或者 input:checked ~ span |
5
QQ2171775959 2018-11-26 16:32:17 +08:00
进来占个位,学习一下。
|