refactor highlight css to prevent issues with cascade

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -55,6 +55,7 @@ $body-font-size: em(14);
   display: inline;
   cursor: pointer;
 
+  $highlight_index: 0;
   @each $highlight in (
     (yellow rgba(255,255,10,0.3) rgba(255,255,10,0.9)),
     (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
@@ -63,11 +64,12 @@ $body-font-size: em(14);
     (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)),
     (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
 
+    $highlight_index: $highlight_index + 1;
     $marker: nth($highlight,1);
     $color: nth($highlight,2);
     $selected_color: nth($highlight,3);
 
-    @if $marker == yellow {
+    @if $highlight_index == 1 {
       &.highlight {
         background-color: $color;
         &.selected { background-color: $selected_color; }
@@ -167,5 +169,3 @@ $body-font-size: em(14);
     border-top-color: rgba(0, 0, 0, .85);
   }
 }
-
-