[CSS] CSS @scope
Browser support: https://caniuse.com/?search=%40scope
Example 1: global @scope ()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@scope (ul) {
li {
background-color: red;
}
}
</style>
</head>
<body>
<h2>CSS @scope (CSS作用域)</h2>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</body>
</html>
Example 2: Styling @scope () itself with :scope
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@scope (ul) {
/* 选择自身 */
:scope {
border: 3px black solid;
}
li {
background-color: red;
}
}
</style>
</head>
<body>
<h2>CSS @scope (CSS作用域)</h2>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</body>
</html>
Example 3: using @scope () to (): to exclue elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 排除to */
@scope (ul) to (ol) {
li {
background-color: red;
}
}
</style>
</head>
<body>
<h2>CSS @scope (CSS作用域)</h2>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</ul>
</body>
</html>
Example 4: @scope inside element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>CSS @scope (CSS作用域)</h2>
<div>
<style>
@scope {
li {
background-color: red;
}
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>