I'm really puzzled about why "Item One" is not displaying as orange below. By specificity rules, the selector .one.two should have a score of 20 (two classes), while .one li should have 11 (one class, one element). So logically, it seems like it should be orange, not blue.
Any thoughts on why it's showing up as blue?
On another note, why am I unable to put a space between .one and .two in the .one.two selector? That works in Chrome but not here.
Here's a link with more information on specificity calculations.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.two {
color: green;
}
.one li {
color: blue;
}
.one.two {
color: orange;
}
</style>
</head>
<body>
<div>
<ul class="one two">
<li>Item One</li>
</ul>
</div>
</body>
</html>