xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS Case Insensitive Attribute Selector All In One

CSS Case Insensitive Attribute Selector All In One

CSS 大小写敏感的属性选择器

/* case sensitive, only matches "case_sensitive" */
[class=case_sensitive] {
  background: pink;
}

Adding a space before the i flag to the attribute selector brackets will make the attribute value search case insensitive.

/* case insensitive, matches "case_insensitive", "Case_insensitive", etc. */
[class=case_insensitive i] {
  background: lightblue;
}

demos

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>CSS case sensitive vs CSS case insensitive</title>
  <style lang="css">
    /* case sensitive, only matches "case_sensitive" */
    [class=case_sensitive] {
      background: pink;
    }

    /* case insensitive, matches "case_insensitive", "Case_insensitive", etc. */
    [class=case_insensitive i] {
      background: lightblue;
    }
    .error {
      color: red;
    }
    .success {
      color: green;
    }
  </style>
</head>
<body>
  <header>
    <h1>CSS case sensitive vs CSS case insensitive</h1>
  </header>
  <main>
    <section>
      <p class="case_sensitive">CSS case sensitive <mark>class="case_sensitive"</mark></p>
      <p class="Case_sensitive error">CSS case sensitive <mark>class="Case_sensitive"</mark></p>
      <hr/>
      <p class="case_insensitive">CSS case insensitive <mark>class="case_insensitive"</mark></p>
      <p class="Case_insensitive success">CSS case insensitive <mark>class="Case_insensitive"</mark></p>
    </section>
    <article></article>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2024</p>
  </footer>
  <!-- <script type="module" src="./app.js"></script> -->
</body>
</html>

image

bug 🐞

https://github.com/mdn/content/blob/main/files/en-us/web/css/attribute_selectors/index.md?plain=1

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

CSS Attribute Selectors

CSS 属性选择器, 字母大小写敏感

Case sensitivity or insensitivity flag s / i

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>CSS case insensitive flags</title>
  <style lang="css">
    /* case sensitive, only matches "case_sensitive" */
    [class=case_sensitive] {
      background: pink;
    }

    /* case insensitive, matches "case_insensitive", "Case_insensitive", etc. */
    [class=case_insensitive_i i] {
      background: lightblue;
    }
    [class=case_insensitive_s s] {
      background: rgb(230, 2, 215);
    }
    .error {
      color: red;
    }
    .success {
      color: green;
    }
  </style>
</head>
<body>
  <header>
    <h1>CSS case insensitive flags</h1>
  </header>
  <main>
    <section>
      <p class="case_sensitive">CSS case sensitive <mark>class="case_sensitive"</mark></p>
      <p class="Case_sensitive error">CSS case sensitive <mark>class="Case_sensitive"</mark></p>
      <hr/>
      <p class="case_insensitive_i">CSS case insensitive <mark>class="case_insensitive_i"</mark></p>
      <p class="Case_insensitive_i success">CSS case insensitive <mark>class="Case_insensitive_i"</mark></p>
      <hr/>
      <p class="case_insensitive_s">CSS case insensitive <mark>class="case_insensitive_s"</mark></p>
      <p class="Case_insensitive_s success">CSS case insensitive <mark>class="Case_insensitive_s"</mark></p>
    </section>
    <article></article>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2024</p>
  </footer>
  <!-- <script type="module" src="./app.js"></script> -->
</body>
</html>

image

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

refs

https://davidwalsh.name/css-attribute-case

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2024-07-17 15:31  xgqfrms  阅读(7)  评论(0)  编辑  收藏  举报