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© xgqfrms 2024</p></footer><!-- <script type="module" src="./app.js"></script> -->
</body>
</html>
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
https://davidwalsh.name/css-attribute-case
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!