title: What is the the difference in Chrome DevTools between checked and crossed out CSS styling?
body: <p>I want to center a div in the middle of the screen. That's why I am overriding some CSS rules. I wrote the rules again and set !important. (Please see the printscreen. The discussed rules are marked in red.)</p>
  <p><a href="https://i.stack.imgur.com/O71Zn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O71Zn.png" alt="enter image description here" /></a></p>
  <p>As you can see the old rules are crossed out now but it still doesn't work. It only works when I manually uncheck the rules. (Yellow Checkbox on the left)</p>
  <p>I checked it out in Firefox and the overridden rules are not crossed. This means the issue is probably related to the override.</p>
  <p><a href="https://i.stack.imgur.com/WJgLV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WJgLV.png" alt="enter image description here" /></a></p>
  <p>What is the difference and how can I fix that?</p>