CSS 选择器对 <p> 中的子标签无效的原因 - CSS

是否有时候会发现，同一个 CSS 选择器，对其他的标签都起作用，唯独对 p 元素中的子标签不起作用，例如在下面的例子当中：

<html>

<head>
	<style>
		
		p#demo .test{
			background-color : yellow;
		}
		
	</style>
</head>

<body>

	<p id="demo">
		
		<!-- 
			因为 a 是行内元素，所以 CSS 选择器 p#demo .test 对它起作用，
			因此 background-color : yellow 将会对此 a 标签生效 
		-->
		<a class="test"> block p tag </a>
		
		<!-- 
			因为 p 是块元素，所以 CSS 选择器 p#demo .test 对它不起作用 
			因此 background-color : yellow 将不会对此 p 标签生效 
		-->
		<p class="test" > inline p tag </p>
		
		<!-- 不过可以直接使用内联样式表，此时 background-color : yellow; 对它起作用 -->
		<p style='background-color : yellow;' > inline-block p tag </p>
	</p>
	
	
</body>

这是因为 p 标签不可以包含任何的块元素（同样也不可以包含 p 标签），所以 CSS 选择器只能选中 p 标签中的非块元素，却无法选中 p 标签内的块元素，但可以直接对 p 标签内的块元素使用内联样式表