Fun with Specificity

fun-with-specificity.html

<div id="copy">
  <ul>
    <li class="more-copy">
      <p class="copy">
        hello
      </p>
    </li>
  </ul>
</div>

fun-with-specificity.scss

// ----
// libsass (v3.3.2)
// ----

// 0-1-0-1
#copy p {
  color: pink;
}

// 0-0-1-1
.more-copy p {
  color: purple;
}

// 0-0-1-1
p.copy {
  color: green;
}

// 0-0-0-2
li p {
  color: red;
}

// 0-0-0-1
p {
  color: orange;
}