There's a <p> inside of an element with "snippet" as one of its classes, which matches your ".snippet p" selector. It doesn't matter how deep the containment hierarchy goes:
Code:
<div class="snippet">
<p>This matches.</p>
<div class="whatever">
<p>As does this.</p>
<table><tr><td><p>And this too.</p></td></tr></table>
</div>
</div>
<p>But not this.</p>
That particular <p> should also match ".snippet table tr td p". ".snippet table tr td p" is more specific than ".snippet p", so ".snippet p" should be applied first, then ".snippet table tr td p". The inline style would have precedence if it was on the <p>, but it's not; it's on a <td> that happens to contain a <p>, and both of the selectors that match the <p> also set the background-color.
Let's take a step back. Your goal is to not have a background-color for the text in the cell and let the cell's background-color show through. The term for that for background-colors is "transparent". It's also the default, which is usually specified in CSS with "initial". Something like this might work for you:
Code:
.snippet {
background-color: white;
}
.snippet p { /* default formatting for regular paragraphs */ }
.snippet table { /* default table formatting */ }
.snippet table p {
/* reset the background color */
background-color: transparent;
}
This doesn't do much by itself, but if you do specify a different background-color for a <table> or <tr> or <td> or whatever and they happen to contain <p>s, then hopefully this will make it do what you actually want.
Note that this is only needed because something is overriding the default. If your ".snippet p" selector doesn't include a background-color, then you don't need to override it for tables containing <p>s. The less you specify, the better. :)
FWIW, if you want a selector that means "only <p>s directly contained inside an element with the 'snippet' class", you could try try ".snippet + p". Also you don't need to use <p>s inside of <td>s or <th>s, so if there's only one <p> in a cell or header you could strip it.