文章插图
文章插图
这里的问题是，选择器的特异性仍然是优先的，所以如果外部范围以比内部更高的特异性针对一个元素 ， 外部范围的样式将会应用 。
这样，当两个范围针对同一个元素时，你可以控制哪一个优先 。而不是总是让内部范围赢 ， 你可以调整选择器的特异性，使得更高特异性的选择器优先 ， 不管它属于哪个范围 。
当你不希望这种行为时，你有几种方法可以防止它 。你可以使用级联层来使一个组件——或者一个组件的某些部分——优先于另一个 。或者，你可以应用一个内部范围约束到外部范围，以防止它发生 。在尝试了一段时间的范围后，我觉得这是一个正确的平衡 。它给了你最大的控制权 ， 而不是让你受制于级联的一套严格的规则 。
这是一个游戏的转折点如果你开发过大型应用，并且不得不依赖 CSS-in-JS 库来防止类名冲突，作用域 CSS是个很好的选择 。如果你使用了复杂的BEM类名系统，并努力使所有的选择器特异性保持一致，想想这可以带来的自由 。如果你曾经使用过shadow DOM来隔离样式，但觉得它过于重手，这是一个更好的方法（当然，shadow DOM仍然有它的用途） 。
以下只是我会尝试的一些想法：
- 定义一个组件的部分，有一个内部边界 ， 部分没有，所以它的“chrome”样式（即包装器、切换按钮等）不影响其子内容，但它可以影响文本内的外观 。
- 在不同的级联层上定义一个组件的部分，这样它可以影响其包含的范围，但仍然容易在更高的层次上覆盖 。
- 嵌套的颜色主题 。
- 在博客文章中更容易地防止样式冲突 。
- 容器查询—我们能通过混合和匹配来提出什么？
推荐阅读
- Java 21，虚拟线程、结构化并发和作用域值
- 黑色棉质衣服变红了怎么恢复 黑色棉质衣服变红怎么变回来
- 怎么把删掉的微信好友加回来 怎么把删掉的微信好友加回来,不通知
- 男人帮回来了？黄磊亲自制作新综艺，嘉宾人选直指男人帮成员！
- 买的春卷皮要回来蒸一下吗 买的春卷皮要回来蒸一下吗多久
- qq密码如何找回 qq密码如何找回来没有手机号
- 《长江七号》的“假小子”徐娇官宣回归周星驰公司，晒和星爷最新搞怪合照：弹指一挥间，我回来啦！
- 绿萝怎么换盆 买回来的绿萝怎么换盆
- 怎么储存南瓜 怎么贮存南瓜
- 长相思第二季过审！不足一小时热度破千万，杨紫最美造型杀回来了