4  结构性伪类选择器

在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器。伪类选择器是CSS中已经定义好的选择器,不能随便命名。常用的伪类选择器是使用在a元素上的几种,如a:link、a:visited、a:hover、a:active。而伪元素选择器并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有4种伪元素选择器,即first-line、first-letter、before、after。例如,p:first-line{color:#ff0000;},li:after{content: url(dot.png)}。而在CSS3中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式,以下分类进行介绍,如表1~表6所示。

表1  4个最基本的结构性伪类选择器root、not、empty和target

表2 选择器first-child、last-child、nth-child、nth-last-child

表3  选择器nth-of-type、nth-last-of-type

表4  循环使用样式

表5  选择器only-child、only-of-type

表6  CSS3中与用户界面有关的伪类选择器

5、nth-child与nth-of-type的区别:

:nth-child和:nth-of-type都是CSS3中的结构性伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很容易区分。下面就将介绍两者的不同,以便于大家正确灵活使用这两类选择器。

先看一个简单的的实例,首先得html部分:

<div id="box">

<p>我是段落1</p>

<p>我是段落2</p>

</div>

两个选择器相对应的CSS代码如下:

#box p:nth-child(2) { color: red; }

#box p:nth-of-type(2) { color: red; }

上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色,如图1所示:

尽管上面两个例子的最后效果一致,但是两个选择器之间存在差异是必然的。

对于:nth-child选择器,意味着选择一个元素满足条件:

1.这是个段落元素

2.这是父标签的第二个孩子元素

图1  伪元素选择器

对于:nth-of-type选择器,意味着选择一个元素如果:

1、选择父标签的第二个段落子元素

我们把上面的实例稍作修改,就可以看到这两个选择器之间的差异表现了,如下HTML代码:

<div id="box">

<h1>我是标题</h1>

<p>我是段落1</p>

<p>我是段落2</p>

</div>

同样,使用上面的CSS代码:

#box p:nth-child(2) { color: red; }

#box p:nth-of-type(2) { color: red; }

这时候两个选择器所渲染的结果就不一样了。

p:nth-child(2)没有达到原意,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素,效果如图2所示:

p:nth-of-type(2)达到了我们想要的结果,其把希望渲染的第二个p标签染红了,效果如图3所示:

图2  伪元素选择器

图3  伪元素选择器

对照上面两个选择器的语义,此处的效果表现差异不难理解。nth-child与nth-of-type的区别也可以看出。

IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5

    CSS综合实例 在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3

    5  边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a.边框风格属性 可以通过边框风格属性b ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

    通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box- ...

随机推荐

  1. 日地拉格朗日L2点轨道的卫星运行

    看了嫦娥四号通信的中继卫星,不明白是怎么运行的,下面的演示解除了我的疑问. https://lt.cjdby.net/thread-2479933-1-2.html

  2. 【Ubuntu 16.04.2_64】安装配置SVN

    [Ubuntu 16.04.2_64]安装配置SVN 转载:https://www.cnblogs.com/yangchongxing/p/10190549.html 检查是否已安装svn # svn ...

  3. 3个Spring Boot核心注解,你知道几个?

    Spring Boot 核心注解讲解 Spring Boot 最大的特点是无需 XML 配置文件,能自动扫描包路径装载并注入对象,并能做到根据 classpath 下的 jar 包自动配置. 所以 S ...

  4. 可编程逻辑(FPGA)与硬核处理器(HPS)之间互联的结构

    本周我想进一步探究可编程逻辑(FPGA)与硬核处理器(HPS)之间互联的结构.我发现了三种主要方式,它们是如何映射并处理通信的,哪些组件需要管控时序并且有访问权限. AXI Bridge 为了能够实现 ...

  5. HTTP 错误 500.19 - Internal Server Error解决办法详解

    最近在服务器端部署程序发现这个问题,HTTP 错误 500.19 - Internal Server Error,程序在本地跑是没有问题的.但是部署完,浏览程序就出现这个问题,今天这篇文章就是记录一下 ...

  6. java设计模式(二)单例模式,一生只爱一人,只争一朝一夕

    单例模式:保证一个类在内存中的对象唯一,有且仅能实例化一次.(如多个代码块需要读取配置文件,or开启事务,orjdbc读取数据源就是个经典例子)参考:吟啸且徐行 实现步骤: 私有构造方法.保证唯一的 ...

  7. 微服务架构 SpringBoot(二)

    第二天内容:想来想去玩个ssm小demo吧 1.创建表 2..引入相关mybatis 数据库jar: <!--mybatis --> <dependency> <grou ...

  8. EF Core 基础知识

    数据库连接字符串 在 ASP.NET Core 添加配置片段: { "ConnectionStrings": { "BloggingDatabase": &qu ...

  9. reselect是怎样提升react组件渲染性能的?

    reselect是什么? reselect是配合redux使用的一款轻量型的状态选择库,目的在于当store中的state重新改变之后,使得局部未改变的状态不会因为整体的state变化而全部重新渲染, ...

  10. MySQL Event历史记录

    需求 SQL Server的作业历史(Job)记录是保存在msdb库中的,很方便就查询相关的Job定义,计划和历史记录,而MySQL的event却没有历史记录.为方便查看event是否正常执行以及执行 ...