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

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -