I believe it says that this section of CSS applies to:
.ui-listview classes that are within .my-page classes.
^Is this assumption correct, as far as it goes?

The part that really throws me is the last bit:
.ui-li.ui-btn
I know that .ui-li and .ui-btn are both classes defined in jquery.mobile-1.0.css. But why is there no space between these two when there was a space between .my-page and .ui-listview?

Now, I know that the CSS section I quoted above is being applied to this html. However, this HTML does not contain anything that has the .ui-li or .ui-btn classes. Moreover, it doesn't even have a .ui-listview class. So how come the CSS is applied to this HTML, when the HTML doesn't have all of the classes for that section of CSS?

So I'm missing something here. Does the '-' symbol mean something that I don't understand?

If someone can just provide a clear explanation of the full meaning of this line:.my-page .ui-listview .ui-li.ui-btn{...}
I'd be very grateful.

To my understanding .my-page .ui-listview .ui-li.ui-btn simply means this:
It's selecting an element with the classes of ui-bttn and ui-li that are children of an element with the class of ul-listview which is a child of an element with the class of my-page. I'm not sure how it relates to your HTML but that's what they CSS does mean. Hope that's somewhat helpful!