Question

我想只点击一个元素的第一部分，它同时包含一个超链接（包含一个复选框）和非超链接部分。换句话说，我想检查复选框。但我不能只分离元素的复选框部分。单击选择器时总是单击超链接部分并将我带到另一个页面。我想只点击包含文本I agree to the的元素部分。我使用css选择器，如'.Grid>div:nth-child(9)>button:nth-child(1)'选择整个选择器，或者如果我给[class="terms-conditions-input"]>label>:nth-child(1)它给了我超链接部分但是我只想要没有超链接的第一部分的css选择器。该元素的HTML如下：

<div class="qa-field qa-checkbox option option-form-control terms-conditions js-question-terms-conditions">
<div class="terms-conditions-input">
<input id="question-terms-conditions" class="pull-left parsley-validated" type="checkbox" data-validate-error-message="Please agree to the Terms & Conditions to continue" data-validate-mincheck="1" data-validate-required="true" name="terms-conditions"/>
<label class="pull-left" for="question-terms-conditions">
 I agree to the 
<a title="Terms & Conditions" target="_blank" href="http://answers.walmart.com/answers/1336/content/termsandconditions.htm"> Terms & Conditions </a>
</label>

有没有办法只为元素的I agree to the部分创建一个css选择器。

Answer 1

根据@Sujata Chanda建议，将I agree to the语句包含在单独的span或div中，向其添加必需的id或class使用选择器组合访问它。像：

<强> HTML：

<label class="pull-left" for="question-terms-conditions">
    <span class="part1">I agree to the</span>
    <a title="Terms & Conditions" target="_blank"
        href="http://answers.walmart.com/answers/1336/content/termsandconditions.htm"> 
        Terms & Conditions
    </a>
</label>

<强> CSS：

div.terms-conditions-input label .part1 {
  color: red;
}

DEMO

此外，更具体地说是使用显着的id或s（s）来编写CSS选择器，而不是使用.Grid>div:nth-child(9)>button:nth-child(1)或[class="terms-conditions-input"]>label>:nth-child(1)。

如何只获取元素的一部分的css选择器

1 个答案: