標(biāo)準(zhǔn)CSS選擇器不支持直接進(jìn)行不區(qū)分大小寫(xiě)的屬性匹配，但可通過(guò)組合多個(gè)選擇器或使用:is()偽類(lèi)實(shí)現(xiàn)變通。文章提出三種方法：1. 通過(guò)列舉所有可能的大小寫(xiě)形式如[data-type="product"], [data-type="Product"]進(jìn)行顯式匹配；2. 使用:is()偽類(lèi)簡(jiǎn)化語(yǔ)法提升可讀性如:is([data-type="product"], [data-type="Product"])；3. 對(duì)于動(dòng)態(tài)內(nèi)容可借助JavaScript添加統(tǒng)一類(lèi)名再在CSS中針對(duì)該類(lèi)定義樣式，從而獲得更高靈活性與控制力。這些方案分別適用于不同場(chǎng)景且能有效解決屬性值大小寫(xiě)不一致帶來(lái)的樣式應(yīng)用問(wèn)題。

You can’t directly perform a case-insensitive attribute match in standard CSS Selectors — at least not by default. But there’s a workaround using the :is() pseudo-class (or :where() if you're managing specificity) along with multiple selectors.

Why Case-Insensitive Matching Matters

HTML attributes like data-* or even class are sometimes written inconsistently, especially when generated dynamically or coming from third-party systems. For example, you might see:

<div data-type="Product"></div>
<div data-type="product"></div>

If your CSS only targets [data-type="product"], it’ll miss the one with the uppercase P.

Use Multiple Attribute Selectors Together

One straightforward way to simulate case-insensitive matching is by listing all possible variations explicitly:

[data-type="product"],
[data-type="Product"],
[data-type="PRODUCT"] {
  /* styles here */
}

This works well when you know the limited set of cases you need to cover. It's simple and compatible with all modern browsers.

This approach isn't scalable if there are many possible combinations — but for small use cases, it’s totally fine.

Leverage :is() for Cleaner Syntax

To make things more concise and readable, especially when targeting multiple values or cases, use the :is() pseudo-class:

:is([data-type="product"], [data-type="Product"], [data-type="PRODUCT"]) {
  /* styles here */
}

It does exactly the same thing as the previous example but avoids repeating the same style block multiple times.

Consider JavaScript for Dynamic Needs

If your project involves dynamic content where attribute values vary unpredictably in case, and you need precise styling control, consider adding a class via JavaScript instead. Then target that class in CSS.

For example:

document.querySelectorAll('[data-type]').forEach(el => {
  if (el.getAttribute('data-type').toLowerCase() === 'product') {
    el.classList.add('is-product');
  }
});

Then in CSS:

.is-product {
  /* styles here */
}

This method gives you full control and flexibility but adds a bit of scripting overhead.

So while native CSS doesn’t support true case-insensitive attribute selectors, combining basic selectors or using :is() gets you pretty close. And for more complex needs, a little JS goes a long way.

以上是如何與CSS選擇器執(zhí)行不敏感的屬性匹配？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！