CSS - 派生选择器 ¶

• 作者：KK

• 发表日期：2016.1.26

p a{color:red;}

上面代码中的选择器部分是p a,它的意思是"针对p标签里面的a标签进行样式渲染",比如以下代码:

<style type="text/css">
p a{color:red;}
</style>
<p>
	<a href="xxxx">我是被p标签包住的链接,红色</a>
</p>
<a href="xxxx">我没有被p标签包住,默认蓝色没有变</a>
<p>
	<span>
		<a href="xxxx">虽然我上面是被span包住,但是再往上始终都是在p标签的空间内,所以我也算是被p标签包住了,中枪--红色</a>
	</span>
</p>

这里出现了一个陌生标签span,暂时别管它,反正一层包一层咯...

深度派生与优先渲染级别 ¶

而且你还可以这样:

<style type="text/css">
ul a{color:green;}
ul p span a{color:red; font-size:18px;}
</style>

<ul>
	<li>
		<p>
			<a href="xxx">aaaaaaa</a>
		</p>
	</li>
	<li>
		<p>
			<span>
				<a href="xxx">bbbbbbb</a>
			</span>
		</p>
	</li>
</ul>

以上CSS代码中用了两个选择器,第一个选择器是ul a,表示ul里的a标签文字都用绿色

而第二个选择器ul p span a表示ul里的p里的span里的a用红色,并且字体大小为18像素

这里有一个权重问题,你先试下将第二个选择器的样式删除,就是删除ul p span a{color:red; font-size:18px;}这一行,就会发现两个a标签都是绿色,没错呀,因为两个a标签都符合ul a选择器所描述,它们都在ul里面嘛

可是当你添加ul p span a{color:red; font-size:18px;}的时候,由于ul p span a描述定位得更加具体,所以浏览器认为这时候这个选择器所描述的元素要渲染新的样式,覆盖掉ul a的样式,所以在span里面那个a标签就变成了红色咯,简单地说,选择器描述越长,处理优先级越高,权重越高

如果想共用样式则是ul p,ul span a{color:red},其实就是以下代码的简写版本

ul p{color:red}
ul span a{color:red}