CSS - 第一个孩子选择器比类选择器更强

Question

我想通过将类添加到由第一个孩子选择器样式化的列表元素来触发CSS动画。但是不知何故，当前的风格不会被增加的类所覆盖。

js fiddle

HTML

<ul class="start"> 
<li id="box" >move up onHover</li> 
</ul> 
<div id="button">hover</div> 

CSS

.start li:first-child{ 

height:100px; 
width:100px; 
background: red; 
opacity: 1; 
transform: translate(0, 190px); 
transition: all 2.0s linear; 

} 

.change{ 
opacity: 1; 
transform: translate(0, 0px); 
} 

#button{ 
width: 80px; 
height: 20px; 
padding: 4px; 
margin-left: 333px; 
border:solid 1px black; 
background: grey; 
cursor: pointer; 
color: white; 
} 

JS

$('#button').hover(function() { 
    $('#box').addClass('change'); 
}) 

Answer 1

这不是它的强大，但针对家长，然后LI是更具体的，所以你必须要公正具体添加新类时

.start li.change 

FIDDLE

Answer 2

.start li:first-child覆盖造型.change

变化

.change{} 

到

.start li.change{} 

Updated fiddle here.