Question

我正在使用第三方库，它有自己的CSS类。这就是DOM的外观：

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

这是我要克服宽度的课程

.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);
}

我无法在不触及#toast-container > div的情况下修改dix的宽度，但如果我对#toast-container > div进行更改，则会产生全局影响。如何使用.toast-custom进行必要的更改？

Answer 1

您遇到的问题是#“ID选择器”（例如#my-rule）比.“类选择器”更具体（例如.my-rule 1}}），[最后]最具体的CSS选择器（规则）获胜。

这适用于实施#toast-containers的任何.toast-custom：

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

这基本上是说“选择也应用了div类的#toast-containers元素的直接后代.toast-custom。 “由于这比框架规则更具体，因此您的规则将覆盖，但仅限于此情况。 - （{{>>不实施#toast-containers的{{1}}不应受到影响。）

来自MDN

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

有关详细信息，请参阅MDN上的CSS Specificity。

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

1 个答案: