Understanding the order of execution in a CSS stylesheet -


consider following css stylesheet:

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

notice display property of #start_experiment_button defined twice. serve purpose? second definition over-ride first, such first need not have been written @ all? or intervening definitions hover , active somehow influence when 2 display values take effect?

the last rule

#start_experiment_button {   display: none; } 

overrides first one. hence element not shown @ all. because element invisible both :hover , :active not applied.

note more specific selector higher priority rule has. if element visible rules defined selectors #start_experiment_button:hover , #start_experiment_button:active have higher priority rule defined #start_experiment_button.


Comments

Popular posts from this blog

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

Making Empty C++ Project: General exception (Exception from HRESULT:0x80131500) Visual Studio Community 2015 -

How to fix java warning for "The value of the local variable is not used " -