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' -

python - How do I create a list index that loops through integers in another list -

c# - “System.Security.Cryptography.CryptographicException: Keyset does not exist” when reading private key from remote machine -