从具有相同属性的css过渡中排除元素

Question

我想从组中的过渡效果中排除一个元素。下面是代码：

HTML

<div class="container">
  <div class="item1"/>
  <div class="item2"/>
  <div class="item3"/>
  <div class="exclude"/>
</div>

CSS

.container {
  some-property: someValue;
  some-property: someValue;
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active {
  opacity: 0.2;
}

Answer 1

使用:not()选择器功能：

.container > *:not(.exclude) {
    transition: opacity etc...
}

或清除transition .exclude的by using a selector with a higher specificity属性：

.container > * {
    transition: etc
}

.container > .exclude {
    transition: none;
}

或只使用!important（您应始终避免使用它：）：

.container {
    transition: etc
}

.container > .exclude {
    transition: none !important;
}

Answer 2

您的过渡应用于父元素，在这种情况下为.container，因此无法消除对子元素的影响。

您需要做的是直接在孩子身上应用效果，并跳过想要避免的孩子。

如果您要在用户单击父级时将过渡效果应用于子级，只需执行以下操作：

div {
  padding: 15px;
  border: 1px solid #222;
}

.container {
  display: grid;
  border-color: #999;
  grid-template: 1fr 1fr/1fr 1fr;
  grid-gap: 15px;
}

.container .exclude {
  background-color: #999;
  border-color: #999;
}

.container div:not(.exclude) {
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active div:not(.exclude) {
  opacity: 0.2;
}

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="exclude"></div>
</div>