Examples of CSS selector strength.

this-is-madness.css

* {}

tag {}

[attribute] {}

[attribute="value"] {}

.class {}

tag[attribute] {}

tag[attribute="value"] {}

tag.class[attribute] {]}

tag.class[attribute="value"] {}

#id {}

tag#id {}

tag#id[attribute] {}

tag#id[attribute="value"] {}

#id.class {}

tag#id.class {}

tag#id.class[attribute] {}

tag#id.class[attribute="value"] {}

/*
  And of course, !important always
  wins, no matter what the selector.
*/

tag {
  key: value !important;
}

/*
  And, the whole game begins anew, as soon as
  there's a parent with a descendant selector.
*/

tag {}

body tag {}

tag#id.class[attribute="value"] {}

body tag#id.class[attribute="value"] {}

/*
  Here's a cool trick you can do, since .foo can also
  be written as attribute selector of [class="foo"].
*/

.foo[class~="foo"] {}

/*
  Or, hey... Stacked attribute selectors!
*/

input[type="text"][disabled] {}

/*
  Really, everthing except for tag/id
  can be stacked, if multiples exist.
*/

.class-1.class-2[attribute-1="value"][attribute-2="value"] {}

tag#id.class-1.class-2[attribute-1="value"][attribute-2="value"] {}