[css-pseudo] Improve examples of cascading.

Author: fantasai

css-pseudo/Overview.bs

@@ -542,16 +542,17 @@ Cascading and Per-Element Highlight Styles</h3>
   <div class="example">
     For example, if the following rules were applied:
     <pre>
-      p::selection { background: green; color: yellow; }
-      em::selection { color: orange; }
+      p::selection      { color: yellow; background: green; }
+      p > em::selection { color: orange; }
+      em::selection     { color:    red; }
     </pre>
     to the following markup:
     <pre>
-      &lt;p>Highlight this <em>and this</em>.&lt;/p>
+      &lt;p>Highlight this &lt;em>and this&gt;/em>.&lt;/p>
     </pre>
     The highlight would be green throughout,
-    with a yellow text outside the <code>&lt;em></code> element
-    and a orange text inside it.
+    with yellow text outside the <code>&lt;em></code> element
+    and orange text inside it.
   </div>
 
   Issue: This could alternately be described in terms of inheritance.
@@ -565,8 +566,29 @@ Cascading and Per-Element Highlight Styles</h3>
   <strong>'':root::selection''</strong>
   for their document-wide selection style,
   since this will allow clean overriding in descendants.
-  (''::selection'' alone would apply to every element in the tree,
-  overriding the more specific styles of any ancestors.)
+  ''::selection'' alone applies to every element in the tree,
+  overriding the more specific styles of any ancestors.
+
+  <div class="example">
+    For example, if an author specified
+    <pre>
+      ::selection { background: blue; }
+      p.warning   { background:  red; }
+    </pre>
+    and the document included
+    <pre>
+      &lt;p class="warning">Some &lt;strong>very important information&lt;/strong>&lt;/p>
+    </pre>
+    The highlight would be blue around “very important information”
+    because the <code>&lt;strong></code> element´s ''::selection''
+    also matches the ''::selection { background: blue; }'' rule.
+    (Remember that ''*'' is implied when a tag selector is missing.)
+    The style rules that would give the intended behavior are
+    <pre>
+      :root::selection { background: blue; }
+      p.warning        { background:  red; }
+    </pre>
+  </div>
 
 <h3 id="highlight-painting">
 Painting the Highlight</h3>