Non-inheriting CSS?

Something I must have come across in the past but it's just hit me again is the way CSS class sometimes seems to suddenly stop applying to an entire block of text for no apparent reason. To take a simple code snippet imagine two classes .bold{font-weight:bold;} and .red{color:red;} and the code as:

<p class="bold">Some text and <span class="red">some red text</span> and some more text</p>

When displayed it should appear as:

Some text and some red text and some more text

and it does, note that all the text is bold including that in part in red. Now instead of using a span element turn it into a block element such as another p


<p class="bold">Some text and <p class="red">some red text</p> and some more text</p>

and it returns the following:

Some text and

some red text

and some more text

Sadly the Google editor keeps reinterpreting my code into div elements but the principle remains. I found this out using an ul element in a p element. Now if I used a div element it seems to work correctly except I don't want a division I want a paragraph of text with a list and I want the whole paragraph in bold.

So far that means closing the paragraph before the list and reopening it after and applying the class style to both paragraphs and the list, which is a tad annoying.