CSS - 第一個孩子選擇器比類選擇器更強

我想通過將類添加到由第一個孩子選擇器樣式化的列表元素來觸發CSS動畫。但是不知何故，當前的風格不會被增加的類所覆蓋。CSS - 第一個孩子選擇器比類選擇器更強

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; 
}

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

來源

2013-12-18 user2520410

這不是它的強大，但針對家長，然後LI是更具體的，所以你必須要公正具體添加新類時

.start li.change

FIDDLE

來源

2013-12-18 17:55:05 adeneo

謝謝你，但是這也是不好用「li.class」我讀了計算器 – user2520410

它不壞，如果你要覆蓋更具體的風格，這是不是真的壞CSS，但在jQuery選擇器可能會導致一些額外的工作，但它也不是很糟糕。 – adeneo

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

變化

.change{}

到

.start li.change{}

Updated fiddle here.

來源

2013-12-18 17:54:53 Hiral

CSS - 第一個孩子選擇器比類選擇器更強

回答

相關問題