如何在不影响全局behvior的情况下应用CSS类

我正在使用一个第三方库，它有自己的CSS类。以下是DOM的外观：

<div id="toast-container" class="toast-custom" aria-live="polite" role="alert">
      <div class="toast toast-info" style="display: block;"> ....

这是框架已经提供的类

---

如果不触摸toast container>div，我无法修改dix的宽度，但是如果我更改toast container>div，它将产生全局影响。如何使用.toast custom进行所需更改

您遇到的问题是ID选择器（例如“我的规则”）比ID选择器更具体。类选择器，例如我的规则和[最后]最具体的CSS选择器规则获胜

这应该适用于任何实现的toast容器。toast自定义：

这基本上是说选择toast容器元素的直接子代div，这些元素也应用了.toast自定义类。因为这比框架的规则更具体，所以您的规则将被覆盖，但只有在这种情况下。-未实现的toast容器。toast自定义不应受到影响

来自MDN

特定性是浏览器决定哪个CSS属性的方法 值与元素最相关，因此将 应用

---

有关更多信息，请参见MDN上的。

toast-container.toast-custom使用更大的CSS专用性了解Steve G.写的内容。是否要覆盖id=toast-container或id=toast-container的子级？这对我很有用：toast-container.toast-custom>div{

.toast-custom {
  top: 0;
  left: 30%;
  width: 50%;
}

#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 46%;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}

/* Note "no space" between */
#toast-container.toast-custom > div {
  ...
}