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
Post a Comment