Skip to main content

Return to Question

edited tags
Link
TylerH
TylerH
  • 21.3k
  • 84
  • 84
  • 121
deleted 46 characters in body
Source Link
j08691
j08691
  • 208.5k
  • 33
  • 269
  • 281

Please refer toI am getting red background-color for both h1. For the code commentsfirst h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why?

#myid { background-color: pink; } .main h1 { background-color: red; } div h1 { background-color: blue; } h1 { background-color: green; }
<!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div>

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why? Please help.

Please refer to the code comments.

#myid { background-color: pink; } .main h1 { background-color: red; } div h1 { background-color: blue; } h1 { background-color: green; }
<!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div>

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why? Please help.

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why?

#myid { background-color: pink; } .main h1 { background-color: red; } div h1 { background-color: blue; } h1 { background-color: green; }
<!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div>

create snippet
Source Link
jhpratt
jhpratt
  • 7.2k
  • 16
  • 43
  • 53

Please refer to the code comments.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <style> #myid {background-color: pink;} .main h1 {background-color: red;} div h1 {background-color: blue;} h1 {background-color: green;} </style> </head> <body> <!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div> </body> </html> 

#myid { background-color: pink; } .main h1 { background-color: red; } div h1 { background-color: blue; } h1 { background-color: green; }
<!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div>

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why? Please help.

Please refer to the code comments.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <style> #myid {background-color: pink;} .main h1 {background-color: red;} div h1 {background-color: blue;} h1 {background-color: green;} </style> </head> <body> <!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div> </body> </html>

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why? Please help.

Please refer to the code comments.

#myid { background-color: pink; } .main h1 { background-color: red; } div h1 { background-color: blue; } h1 { background-color: green; }
<!-- the background-color expected to be pink for the following h1 --> <div class="main" id="myid"> <h1>This is paragraph one!</h1> </div> <!-- the background-color expected to be brown for the following h1 --> <div style="background-color:brown;" class="main" > <h1>This is paragraph two!</h1> </div>

I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why? Please help.

Source Link
Russell
Russell
  • 107
  • 5