Question

如何使用:: before选择器为复选框创建css selctor。我想创建单选按钮的css选择器。我在firepath中使用选择器例如：[data-model-cid="c279"]>label并且它向我展示了元素。但是在测试脚本中它无法获取元素。当我尝试通过$('[data-model-cid="c279"]>label')获取元素时在谷歌控制台中它无法获取元素。所以我认为:: before选择器需要添加到选择器中以搜索元素。下面给出了Html。如何用:: before？

编写一个选择器

    <div class="radio" data-model-cid="c279">
      :: before
    <input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
    <label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
      :: before
      4 years 
    <strong>(+ $39)</strong>
    </label>
    </div>

Answer 1

据我所知，你不能这样做，主要是因为input是一个空标签（自动关闭），它基本上没有内容。

如果您查看以下示例，请在<div>元素内

<style>
    .my-div::before {
        content: 'before';
    }

    .my-div::after {
        content: 'after';
    }
</style>
<div class="my-div"></div>

你会注意到chrome devtools你会得到这样的东西

<div class="my-class">
    ::before
    ::after
</div>

这是可能的，因为::before和::after psuedo元素在div标签内，如果你添加另一个具有高度和背景的子div你将会看到之前的在子div上方弹出，在子div之后弹出这是因为它们基本上是子项，但是插入了不同的 way（通过CSS）。

以下是您正在寻找的浏览器

<input type="radio"></input>

到

<input type="radio"> ::before ::after </input>

但这已经错了，因为输入标记中不应包含任何内容。大多数浏览器可能会忽略这一点，甚至尝试为您修复标记，但您根本无法使其正常工作。

来自documentation on MDN

“之前和之后：伪元素元素与其他元素交互盒子......好像它们是真正的元素插入其中相关元素。“

正确的<input>标记如下所示：

<input type="radio" />

由于没有任何空间放置::before和::after，因此无效。不幸的是，你必须找到另一种解决方案。

如何在自动化testwith :: before中编写css选择器以查找元素

1 个答案: