css Selector Question

<!DOCTYPE html>
<style>
.button01 a:hover, .button01 a:active {
        background-color: blue;
      }

a.botton01:hover,a.button01:active {
        background-color: blue;
      }
</style>

<body>
    <div>
        <a href="#" class="button01">
            Click me Button </a>
     </div>
</body>
</html>

.Button01 a:hover applies, but not if you change the selector to a.botton01:hover. What's the difference between the two choices and why it doesn't apply when you write the second form... I'm curious

html css button

2022-09-21 11:08

1 Answers

The meaning of the 'first form' you mentioned is as follows.

The meaning of the 'second form' you mentioned is as follows.

Therefore, the two styling methods you created have different purposes.

.Button01 a:hover applies, but not if you change the selector to a.botton01:hover.

You said that, but the second method was applied to the code you uploaded.

I hope it was helpful.

<style>
.button01 a:hover, .button01 a:active {
  background-color: red;
}

a.botton01:hover, a.button01:active {
  background-color: green;
}
</style>
<body>
    <div>
        <a href="#" class="button01">
          Button1 <!-- Green color is applied. -->
        </a>
     </div>
     <div class="button01">
       <a href="#">
         Button2 <!-- red color is applied. -->
       </a>
     </div>
</body>

Note

2022-09-21 11:08

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656