BuddyPress.org

If you look at the body element and swap between the pages you should see various different classes applied depending on page being viewed. You should be able to use these classes to effect descndent selector styling, in other words you will add a class from the body element at the start of your selector group e.g:

body.groups #id .class {}
body.directory #id .class {}
body.profile #id .class {}
etc

The question of these classes has been raised and improvements to them have been committed to 1.3 to make it a little easier to use these hooks for styling.

At the moment you might find that to, say, style all the single member pages you have to group styles as there isn’t a class that covers the general members account/profile pages views.

working in a child theme yes you can copy over files and add extra classes where you think it helps and/or add custom styles to the main stylesheet in the child theme to override the default styles. When copying files over preserve the directory structure that exists in bp-default so your files get found and used in preference to the default ones.

Yep decedent selectors are actually the space you might leave between the selectors, a space says that the selector/element on the extreme right has to have a parent or ancestor/antecedent that matches to the one on the left thus:

#my-element a {} means that the anchor will only have these styles if it is nested at some point in an element named as #my-element.

At some point is important as a descendant selector denotes a hierarchy to any level or depth, that anchor can be further nested in a dozen elements.

So if you had styles for avatar that ran something like this:

li div.item-avatar a.avatar {}

but you wanted to change it in some way for say the account page ‘friends view’

then you could do:

body.friends li div.item-avatar a.avatar {}

It all depends on how the original has been styled as to how you override it and you have to be aware of the specificity of the selector rule or the ‘weight’, if the original styles using selectors like this:

#some-id #another-id li div.item-avatar a.avatar {}

then you new rule will not override it as each selector carries a weighted value and ID’s carry the heaviest value so their selector group trumps yours, you would need to add a few IDs or match IDs until your selector set had a higher value.