按屬性名稱匹配元素的CSS選擇器開始

Question

是否有任何CSS選擇器可以匹配這些元素？ （我需要它的adblocker配置，看着W3C選擇器文件 - 沒有發現那裏的提示。通用解決方案需要，因爲部分後data-d-得到隨機的網站）。

<div data-d-9y3x> 
<div data-d-m01> 
<div data-d-whatever> 

Answer 1

否，目前還沒有的方式來選擇基於其名稱是開始一定值的屬性的存在的元素。 以開頭，選擇僅適用於屬性值。

這樣的選擇器在CSS Selectors Level 4 spec中也沒有提到，所以它看起來不會很快有效。

您有以下選擇：

• 與格式element[attribute-name]所有可能的屬性名稱值選擇使用組。但是，當確切的屬性名稱不固定/未知時，此選項不可行。
• 使用JavaScript（或您的偏好的其他一些腳本庫）。下面是一個非常快速的粗略樣本，爲未來的訪客帶來好處。

var el = document.getElementsByTagName('div'); 
 

 
for (var i = 0; i < el.length; i++) { 
 
    var attr = el[i].attributes; /* get all attributes on the element */ 
 
    for (var j = 0; j < attr.length; j++) { 
 
    if (attr[j].name.indexOf('data-') == 0) { /* if element has an attribute whose name has data- */ 
 
     el[i].style.color = 'red'; 
 
     break; 
 
    } 
 
    } 
 
}

<div data-d-9y3x>Some</div> 
 
<div data-d-m01>text</div> 
 
<div data-d-whatever>content</div> 
 
<div test-data-d-whatever>and</div> 
 
<div d-whatever>more</div> 
 
<div testdata-d-whatever>...</div>