How to apply a distinct css class to each value of a field with multiple values?
A simple approach would be to use CSS :nth-child() pseudo classes.  Assuming some HTML output like:

    &lt;div class="entity-reference-wrapper"&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
        &lt;div class="entity-reference"&gt;
            [CONTENT]
        &lt;/div&gt;
    &lt;/div&gt;&lt;!--/.entity-reference-wrapper --&gt;


You can target the 2nd div with css like this:

    .entity-reference-wrapper .entity-reference:nth-child(2) {
        color: green;
    }


Odd children like this:

    .entity-reference-wrapper .entity-reference:nth-child(odd) {
        color: green;
    }


There are a lot more options over at CSS tricks here:  https://css-tricks.com/useful-nth-child-recipies/