Question

考虑以下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;
}

请注意，display的{{1}}属性定义了两次。这是否有用？第二个定义是否只是简单地覆盖了第一个，这样第一个定义根本就不需要写了？或者#start_experiment_button和hover的干预定义是否会影响两个active值何时生效？

Answer 1

最后一条规则

#start_experiment_button {
  display: none;
}

覆盖第一个。因此，根本没有显示该元素。由于该元素不可见，因此不会应用:hover和:active。

请注意，作为更具体的选择器，规则具有更高的优先级。因此，如果元素可见，则选择器#start_experiment_button:hover和#start_experiment_button:active定义的规则将优先于#start_experiment_button定义的规则。

Answer 2

第二个定义是否仅仅覆盖了第一个定义，以便首先不需要编写第一个定义？

是的，仅适用于display属性。其他属性不受影响。

或者，当两个显示值生效时，悬停和活动的介入定义会以某种方式影响吗？

不，他们没有，因为这些规则都没有自己的display声明，即使他们这样做，也不可能达到这些状态，因为该元素永远不会渲染。

目前尚不清楚为什么最后一条规则存在，以及为什么它出现在那个无法通过媒体查询或更合格的选择器看守的地方，因为它的display: none声明使得全部通过防止元素被渲染而使其他三个规则变得多余。

Answer 3

是的，它会覆盖..

#start_experiment_button
{
  display: none;
}

此代码将覆盖您的第一个代码，因为代码在执行时从第一行读到最后一行。希望您得到答案..

理解CSS样式表中的执行顺序

3 个答案: