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

2018-11-23 11:53:53 +08:00
 imherer
<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 选择器如何实现呢?

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

2749 次点击
所在节点    程序员
5 条回复
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
进来占个位,学习一下。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/510695

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX