瞭解在CSS樣式表

考慮下面的CSS樣式表的執行順序：瞭解在CSS樣式表

#start_experiment_button 
{ 
    display: inline-block; 
    color: black; 
    border: 3px outset gray; 
    background-color: #CCCCCC; 
    padding: 8px; 
    text-decoration: none; 
    font-family: Arial, Helvetica; 
    font-weight: bold; 
} 


#start_experiment_button:hover 
{ 
    border: 3px inset gray; 
} 


#start_experiment_button:active 
{ 
    border: 3px inset gray; 
} 


#start_experiment_button 
{ 
    display: none; 
}

注意的#start_experiment_button的display屬性定義了兩次。這是否有用？第二個定義是否簡單地覆蓋第一個定義，這樣第一個需求根本不需要寫出來？或者hover和active的干預定義在兩個display值的生效時以某種方式影響？

來源

2016-01-21 dbliss

第二個將覆蓋第一個。即：display：none;' – ketan

你基本上是在問關於特異性的問題，這是用CSS來掌握的一個粗糙的話題。查看：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ – Anthony

這個問題與特異性無關，除了兩個同樣具體的選擇器（heck， *兩個相同的選擇器*）參與其中。 – BoltClock

最後一條規則

#start_experiment_button { 
    display: none; 
}

覆蓋的第一個。因此，該元素根本沒有顯示。因爲元素不可見，所以:hover和:active都不適用。

請注意，更具體的選擇器規則具有更高的優先級。因此，如果元素可見，則選擇器#start_experiment_button:hover和#start_experiment_button:active定義的規則將具有更高的優先級，然後由#start_experiment_button定義的規則。

來源

2016-01-21 04:41:59

接受此答案是因爲它首先提交。 – dbliss

第二個定義是否簡單地覆蓋第一個定義，以至於第一個定義完全不需要被寫入？

是的，只爲display財產。其他屬性不受影響。

或者當兩個顯示值生效時，做懸停的定義和活躍的影響嗎？

不，他們不這樣做，因爲無論這些規則有自己display聲明，即使他們這麼做，因爲該元素是從未呈現這些國家就不可能實現。

爲什麼這最後一條規則存在，它爲什麼會出現在那個地方通過任何媒體查詢或以上資質選擇無人防守的，因爲它的display: none聲明，它使所有其他三個通過防止多餘的規則目前還不清楚元素從被渲染。

來源

2016-01-21 04:43:56 BoltClock

是的，它會覆蓋..

#start_experiment_button 
{ 
    display: none; 
}

此代碼將覆蓋你的第一個代碼，該代碼從第一線，而其執行讀取到最後..希望你有你的答案..

來源

2016-01-21 05:01:28

瞭解在CSS樣式表

回答

相關問題