禁用子元素的继承属性

Question

望着这个例子中的顺序转换：

http://jsbin.com/teqifogime/edit?html,css,output

在第一个块，文字颜色变化旁边的背景颜色的过渡，因为它从其父继承它。

第二个块中的文本颜色仅在其父元素完成转换后才转换。

将某些使用大量转换的东西组合在一起，看起来像意想不到的行为，这可能会令人沮丧。任何方式在这个？

HTML

<div class="block block-one"> 
    <h2>Color Test</h2> 
    </div> 
    <div class="block block-two"> 
    <h2>Color Again</h2> 
    </div> 

CSS

.block { 
    width: 200px; 
    margin: 20px auto; 
    background-color: pink; 
    text-align: center; 
    padding: 10px; 
    transition: 1s; 
} 

h2 { 
    transition: 1s; 
} 

.block-one:hover { 
    background-color: wheat; 
} 

.block-one:hover h2 { 
    color: azure; 
} 

.block-two:hover { 
    color: azure; 
    background-color: wheat; 
} 

编辑

对于一些清晰：在我的现实世界场景中我有一堆CSS组件的自己的转换属性，以及一些他们以这种奇怪的方式结束了“链接”。我最终需要制定一些特定的规则来获得我认为应该成为默认行为的异常。也许我的问题是更多关于CSS的本质 - 如果有某种原因，为什么事情以这种方式工作

Answer 1

这是一个有点不清楚你问什么，但我想去除.block-two的h2的transition应该做的伎俩。

你有一些选择：

.block-one h2 { 
    transition: 1s; 
} 

第二

.block-two h2 { 
    transition: 0s; 
} 

.block-two-title { 
    transition: 0s; 
} 

.block-title--transition { 
    transition: 1s; 
} 

这里的第二之一：

.block { 
 
    width: 200px; 
 
    margin: 20px auto; 
 
    background-color: pink; 
 
    text-align: center; 
 
    padding: 10px; 
 
    transition: 1s; 
 
} 
 

 
h2 { 
 
    transition: 1s; 
 
} 
 

 
.block-one:hover { 
 
    background-color: wheat; 
 
} 
 

 
.block-one:hover h2 { 
 
    color: azure; 
 
} 
 

 
.block-two:hover { 
 
    color: azure; 
 
    background-color: wheat; 
 
} 
 

 
.block-two h2 { 
 
    transition: 0s; 
 
}

<div class="block block-one"> 
 
    <h2 class="block-title--animated">Color Test</h2> 
 
</div> 
 
<div class="block block-two"> 
 
    <h2>Color Again</h2> 
 
</div>