使用:deep()实现

`:deep()` 是 SCSS (Sass) 和一些CSS预处理器中的一个伪类，用于解决CSS选择器穿透问题。在标准CSS中，如果一个后代元素需要被单独样式化，但其父元素有相同的ID、类名或标签名，可能会导致样式冲突，这时可以使用 `:deep()` 来精确地匹配目标元素。

例如，假设有一个由Bootstrap生成的 `navbar` 元素，内部包含一个 `dropdown-toggle`，而你想对这个特定的 `dropdown-toggle` 实施额外样式，但由于它们共享了很多相同的类名，直接使用 `.navbar .dropdown-toggle` 可能会覆盖掉其他地方的 `dropdown-toggle`。在这种情况下，你可以这样做：

.dropdown-menu {
  & > :deep(.dropdown-toggle) {
    color: red;
  }
}

上面的代码意味着只针对 `dropdown-menu` 下的 `dropdown-toggle` 子元素，并将其颜色设置为红色。

注意，`:deep()` 是 Sass 特有的，不是所有CSS解析器都支持。在非Sass环境中，你可以使用 `>>>` 或 `&` 针对 Shadow DOM，或者使用浏览器提供的 `::slotted()` 伪元素。