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.