[css-pseudo] Switch example to use a non-inherited property for cascaded-inheritance.

Author: fantasai

css-pseudo/Overview.bs

@@ -541,16 +541,16 @@ Cascading and Per-Element Highlight Styles</h3>
   <div class="example">
     For example, if the following rules were applied:
     <pre>
-      p::selection { background: red; color: yellow; }
-      em::selection { background: green; }
+      p::selection { background: green; color: yellow; }
+      em::selection { color: orange; }
     </pre>
     to the following markup:
     <pre>
       &lt;p>Highlight this <em>and this</em>.&lt;/p>
     </pre>
-    The highlighted would be yellow throughout,
-    with a red background outside the <code>&lt;em></code> element
-    and a green background inside it.
+    The highlight would be green throughout,
+    with a yellow text outside the <code>&lt;em></code> element
+    and a orange text inside it.
   </div>
 
   Issue: This could alternately be described in terms of inheritance.

css-pseudo/Overview.html

@@ -1021,8 +1021,8 @@ <h3 class="heading settled" data-level="3.3" id="highlight-cascade"><span class=
       <div class="example">
     For example, if the following rules were applied:
 
-        <pre>p::selection { background: red; color: yellow; }
-em::selection { background: green; }
+        <pre>p::selection { background: green; color: yellow; }
+em::selection { color: orange; }
 </pre>
 
 
@@ -1033,9 +1033,9 @@ <h3 class="heading settled" data-level="3.3" id="highlight-cascade"><span class=
 </pre>
 
 
-        <p>The highlighted would be yellow throughout,
-    with a red background outside the <code>&lt;em></code> element
-    and a green background inside it.</p>
+        <p>The highlight would be green throughout,
+    with a yellow text outside the <code>&lt;em></code> element
+    and a orange text inside it.</p>
 
 
       </div>