禁用子元素的繼承屬性

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>