Skip to main content

CSS 选择器匹配扩展

以下不仅适用于类名的匹配，也适用于各属性的匹配，例如：

div[class*="btn"] {
  color: red;
}

div[id*="btn"] {
  color: red;
}

div[title*="btn"] {
  color: red;
}

p[lang*="en"] {
  color: red;
}

a[src*="cn"] {
  color: red;
}

匹配包含指定字符串​

1、* 只要包含即匹配​

div[class*="btn"] {
  color: red;
}

<div class="user-btn">123</div> // 匹配
<div class="userbtn">123</div>  // 匹配
<div class="btn">123</div>      // 匹配
<div class="btnuser">123</div>  // 匹配
<div class="btn-user">123</div> // 匹配

2、~ 需要包含且完全独立才匹配​

div[class~="btn"] {
  color: red;
}

<div class="user-btn">123</div> // 不匹配
<div class="userbtn">123</div>  // 不匹配
<div class="btn">123</div>      // 匹配
<div class="btnuser">123</div>  // 不匹配
<div class="btn-user">123</div> // 不匹配

匹配以指定字符串开头​

3、^ 只要开头即匹配​

div[class^="btn"] {
  color: red;
}

<div class="user-btn">123</div> // 不匹配
<div class="userbtn">123</div>  // 不匹配
<div class="btn">123</div>      // 匹配
<div class="btnuser">123</div>  // 匹配
<div class="btn-user">123</div> // 匹配

4、| 需要开头且独立才匹配​

div[class|="btn"] {
  color: red;
}

<div class="user-btn">123</div> // 不匹配
<div class="userbtn">123</div>  // 不匹配
<div class="btn">123</div>      // 匹配
<div class="btnuser">123</div>  // 不匹配
<div class="btn-user">123</div> // 匹配

匹配以指定字符串结尾​

5、$ 只要结尾即匹配​

div[class$="btn"] {
  color: red;
}

<div class="user-btn">123</div> // 匹配
<div class="userbtn">123</div>  // 匹配
<div class="btn">123</div>      // 匹配
<div class="btnuser">123</div>  // 不匹配
<div class="btn-user">123</div> // 不匹配