Descendant Style Selector not Working

Question

Anyone know why this descendant style selector does not work?
<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:comp1="comp1.*" xmlns:comp2="comp2.*">
  <s:layout>
    <s:HorizontalLayout paddingLeft="10" paddingTop="10"/>
  </s:layout>
  <fx:Style>
    @namespace comp1 "comp1.*";
    @namespace comp2 "comp2.*";
    comp1|ParentButtonClassOne comp1|CustomButton {
      color: red;
    comp2|ParentButtonClassTwo comp2|CustomButton {
      color: blue;
  </fx:Style>
  <comp1:CustomButton label="Button One"/>
  <comp2:CustomButton label="Button Two"/>
</s:Application>
--------- comp1.ParentButtonClassOne.as ------
package comp1
  import spark.components.Button;
  public class ParentButtonClassOne extends Button{}
--------- comp1.CustomButton.as ------
package comp1
  import spark.components.Button;
  public class CustomButton extends Button{}
--------- comp2.ParentButtonClassTwo.as ------
package comp2
  import spark.components.Button;
  public class ParentButtonClassTwo extends Button{}
--------- comp2.CustomButton.as ------
package comp2
  import spark.components.Button;
  public class CustomButton extends Button{}

Answer 1

Doesn't "comp2|ParentButtonClassTwo comp2|CustomButton" mean that this style will only be applied to CustomButtons inside of a ParentButtonClassTwo?  From the code sample here it looks like that isn't the case.