css - 如何为 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>

这专门用于修改 Constant Contact 电子邮件注册框。

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;}