<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Matching specificity</h1>
      <figure class="callout">
        <p>
          Because both of these rules have identical specificity, the newest one is selected by CSS to have its rules applied.
        </p>
      </figure>
      <button class="my-button" onclick="alert('hello')">Click me</button>
    </article>
  </div>
</main>

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}