V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
imherer
V2EX  ›  程序员

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

  •  
  •   imherer · 2018-11-23 11:53:53 +08:00 · 2810 次点击
    这是一个创建于 2184 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
        1
    vja  
       2018-11-23 11:58:53 +08:00   ❤️ 1
    用 class 来选中不是这样的语法,你搞错了,用 class 选中应该是 span.radio__label
    vja
        2
    vja  
       2018-11-23 12:00:06 +08:00
    如果是需要用`id`选中应该用`#`号,例如`div#fuck`
    vja
        3
    vja  
       2018-11-23 12:01:05 +08:00
    到这上面把 css 语法过一遍吧,https://www.w3schools.com/

    自备梯子
    P233
        4
    P233  
       2018-11-23 12:52:25 +08:00   ❤️ 1
    .is-checked + span

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

    input:checked + span 或者 input:checked ~ span
    QQ2171775959
        5
    QQ2171775959  
       2018-11-26 16:32:17 +08:00
    进来占个位,学习一下。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4075 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:10 · PVG 12:10 · LAX 20:10 · JFK 23:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.