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

通过例子说明:

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。

伪类的格式重点:父标签层级 & 当前标签类型的更多相关文章

  1. a标签伪类选择器以及伪元素:hover的案例

    1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...

  2. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

  3. 浅析a标签的4个伪类 .

    关于伪类,大家最熟悉的还是a标签的4个伪类::link        有链接属性时:visited    链接地址已被访问过:active     被用户激活(在鼠标点击与释放之间发生的事件):hov ...

  4. 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  5. HTML连载64-a标签伪类选择器的注意点与练习

    一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...

  6. HTML连载63-a标签的伪类选择器

    一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...

  7. 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

随机推荐

  1. 一些优秀的iOS第三方库

    文章目录 Kits ProgressHUD 加载与刷新 图像 引导页 Views Others Kits RegexKitRegexKit是一个正则表达式工具类. JSONKitJSONKit是一个比 ...

  2. 51Nod 1717

    链接 分析:对于任意一个数,它的约数总是成对出现的,但是对于完全平方数,它因为有两个约数不相等,所以只会出现奇数次,所以最终的结果就是减去完全平方数 #include "iostream&q ...

  3. 基于ANDROID平台,U3D对蓝牙手柄键值的获取

    对于ANDROID平台,物理蓝牙手柄已被封装,上层应用不可见,也就是说对于上层应用,不区分蓝牙手柄还是其它手柄: 完成蓝牙手柄和ANDROID手机的蓝牙连接后,即可以UNITY3D中获取其键值: 在U ...

  4. Goroutine被动调度之一(18)

    本文是<Go语言调度器源代码情景分析>系列的第18篇,也是第四章<Goroutine被动调度>的第1小节. 前一章我们详细分析了调度器的调度策略,即调度器如何选取下一个进入运行 ...

  5. Golang项目的测试实践

    Golang项目的测试实践 最近有一个项目,链路涉及了4个服务.最核心的是一个配时服务.要如何对这个项目进行测试,保证输出质量,是最近思考和实践的重点.这篇就说下最近这个实践的过程总结. 测试金字塔 ...

  6. PTA 2-1 列出连通集【DFS+BFS基础】

    给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...

  7. Unity陀螺仪

    using UnityEngine; using System.Collections; using UnityEngine.UI; //摄像机 陀螺仪转动 public class TGyro : ...

  8. bzoj 4589: Hard Nim【线性筛+FWT+快速幂】

    T了两次之后我突然意识到转成fwt形式之后,直接快速幂每次乘一下最后再逆回来即可,并不需要没此次都正反转化一次-- 就是根据nim的性质,先手必输是所有堆个数异或和为0,也就变成了一个裸的板子 #in ...

  9. SQL中进行转列的几种方式

    SQL中进行转列 在很多笔试的程序员中会有很多写SQL的情况,其中很多时候会考察行转列.那么这个时候如果能写出来几种行转列的SQL,会给面试官留下比较好的印象. 以下是这次sql转换的表结构以及数据 ...

  10. HTML5中div,article,section的区别

    最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...