伪类的格式重点：父标签层级 & 当前标签类型

通过例子说明：

css1:

	span:nth-of-type(2){color: red;}

css2:

	span :nth-of-type(2){color: red;}

html:

		<p>

			<span>I have an apple</span>

			<i>I have an orange</i>

			<strong>I have a banana</strong>

			<span>

				<em>I</em>

				<b>have</b>

				<em>two </em>

				<em>apple</em>

				<b>haha</b>

			</span>

			<span>I have three apple</span>

			<i>I have two orange</i>

		</p>

当采用css1时，结果：

>解析:

1、css1中 span与冒号间无空格，span被定义为同级兄弟标签。

2、此时选择器会选取众多span标签中序列位2的span元素。

3、此例中的第二个标签整体元素应用css1.

当采用css2时，结果：

>解析：

1、css2中span与冒号间有空额，span被定义为“父元素”。

2、此时选择器会选取父元素span的子元素中同类元素且序列位2的元素

3、如：第一行span内无子元素标签，不应用css2。

第二行不是span元素，不应用css2。

第四行即第二个span标签内部有子元素 em,b，选择器会选取第二个em标签和第二个b标签应用css2。

巴特西

伪类的格式重点：父标签层级 & 当前标签类型

伪类的格式重点：父标签层级 & 当前标签类型

通过例子说明：

当采用css1时，结果：

当采用css2时，结果：

最新文章

热门文章