如何用 css 选择器选中如下 html 中的 span 标签

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2191 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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 选择器如何实现呢？

客串前端，名次或术语用的不对的还请各位见谅！

5 条回复 • 2018-11-26 16:32:17 +08:00

vja

2018-11-23 11:58:53 +08:00

用 class 来选中不是这样的语法，你搞错了，用 class 选中应该是 span.radio__label

vja

2018-11-23 12:00:06 +08:00

如果是需要用`id`选中应该用`#`号，例如`div#fuck`

vja

2018-11-23 12:01:05 +08:00

到这上面把 css 语法过一遍吧，https://www.w3schools.com/

自备梯子

P233

2018-11-23 12:52:25 +08:00

.is-checked + span

感觉 .radio__input 这个包裹并无必要，还可以

input:checked + span 或者 input:checked ~ span

QQ2171775959

2018-11-26 16:32:17 +08:00

进来占个位，学习一下。