CSS Case Insensitive Attribute Selector All In One

xgqfrms發表於2024-07-17
CSS

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, 禁止轉載 🈲️，侵權必究⚠️！

相關文章