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。

  • 相关阅读:
    EL表达式 与 servlvet3.0的新规范
    回调函数
    结构体
    指针函数 和 函数指针
    BCC校验(异或和校验)
    stm32 USART串口通信
    stm32 中断
    Systick系统滴答定时器
    stm32f7 时钟
    按键连按和不连按
  • 原文地址:https://www.cnblogs.com/deepblue775737449/p/9081961.html
Copyright © 2011-2022 走看看