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>
bug
标签：Case,case,insensitive,Attribute,sensitive,Insensitive,class,CSS From： https://www.cnblogs.com/xgqfrms/p/18306411