如何為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;}