zoukankan      html  css  js  c++  java
  • 伪类的格式重点:父标签层级 & 当前标签类型

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

    通过例子说明:

    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。

  • 相关阅读:
    [导入]Interesting Finds: 2007.12.17
    [导入]Interesting Finds: 2007.12.15
    [导入]Interesting Finds: 2007.12.13
    Interesting Finds: 2007.12.22
    吾生也有涯,而知也无涯。
    Hello world
    学习了clipboard复制剪切插件的使用
    在博客园学习成长
    命名空间概述
    Linux vi/vim
  • 原文地址:https://www.cnblogs.com/deepblue775737449/p/9081961.html
Copyright © 2011-2022 走看看