W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> @scope (.container) to (.news) { h2 { font-size: 30px; color: green; } img { border: 5px solid maroon; } } </style> </head> <body> <h1>使用 @scope 规则 - 环形作用域</h1> <p>环形作用域仅针对祖先树中位于两个元素之间的元素。因此，它的作用范围是仅关注放置在 .container 内部但不在 .news 内部的元素。</p> <div class="container"> <img src="/i/logo/w3.png" alt="W3 logo"> <div class="news"> <h2>一些标题</h2> <img src="/i/logo/w3.png" alt="W3 logo"> </div> </div> </body> </html>