如何为data-qe-id编写正确的css选择器？

Question

如何为data-qe-id编写正确的css选择器？

<h2 data-qe-id="form-title" class="ctct-form-header">Sign up for updates!</h2>
<p data-qe-id="form-description" class="ctct-form-text">Get news from us in your inbox.</p>

这是专门用于修改常量联系人电子邮件注册框。

Answer 1

您可以使用

h2[data-qe-id="form-title"] {
    color: red;
}

使用方括号，您可以引用任何给定DOM元素的属性及其值。

Answer 2

你是一个属性选择器。像这样：

[data-qe-id] {
    color: red;
}

或具有特定价值的属性......

[data-qe-id="form-title"] {
    color: red;
}

或具有以某个字符串开头的值的属性...

[data-qe-id^="form"] {
    color: red;
}

Answer 3

使用选择器然后使用data-qe-id：

    #ctct_form_0 [data-qe-id="form-description"]{
           color: red;}