课时77.序选择器(掌握)

CSS3中新增的选择器最具代表性的就是序选择器。

1.同级别的第几个

1.      :first-child 选中同级别中的第一个标签

注意点:不区分类型

      

但是我们这里有一个注意点,如果我们在第一个p之前加一个h1,则第一个p就不变红了,因为我们是选中同级别中的第一个标签,在我们这个界面中,h1,p,div是同级别的,所以第一个p不变色。

 

2.  :last-child 选中同级别中的最后一个标签

注意点:不区分类型

3.    :nth-child(n)  选中同级别中的第几个标签

注意点:不区分类型

现在想给我是段落7设置成红色,我是段落7是我们同级别中的第三个,我们应该这么写

为什么我是段落2也变色了?因为对于body来说,h1,3个p和div都是同级别的,所以我选中同级别的第三个就也选中了我是段落2.

4.      :nth-last-child(n) 选中同级别中的倒数第几个标签

5.       :only-child    选中父元素中唯一的元素

首先看body元素中有两个元素,一个p,一个div,所以不是唯一元素,所以不变色,而div下只有一个p,所以变色,而如果在div下再添加一个h1标签,则它们都不变色了,因为div下有两个元素了,不是唯一都了

2.同类型的第几个

1.       :first-of-type 选中同级别中同类型的第一个标签

来看下面的例子:

怎么给我是段落1 设置成红色呢?

首先,h1,两个p,div是同级别的,而在这个同级别中,两个p又是同类型的,所以我是段落1就是同类型的第一个,那我们有没有办法取出同级别中同类型的第一个呢?就用我们下面的方法:同类型的第几个。

2.     :last-of-type 选中同级别中同类型的最后一个标签

我们现在想让我是段落2和我是段落5都变色,那么我们需要怎么做?

我们需要取出同级别同类型的最后一个,这个时候就取出了我是段落2和我是段落5

3.  nth-of-type(n)选中同级别中同类型的第几个标签

现在我要给我是段落3,我是段落7设置颜色,因为我是段落7是第三个,而我是段落3不是第三个,所以这是,我们要用到同级别,同类型的第三个

  

4.        :nth-last-of-type  选中同级别中同类型的倒数第几个标签

  

5.      only-of-type  选中父元素中唯一类型的某个标签

现在我想选中我是段落2,虽然它不是唯一的标签,我也想选中它,应该这么写

这时我发现我是段落1与我是段落2都变色了,因为在body中有唯一类型的p标签,而在div下也有唯一类型的p标签,所以这两个都改变颜色了

本文转载于:猿2048➯https://www.mk2048.com/blog/blog.php?id=2ckjhaa&title=课时77.序选择器(掌握)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gulp——文件压缩和文件指纹

先看下文件指纹添加成功发布后的“成果”。 首先介绍下gulp的文件压缩(压缩css和js) (下面介绍的代码移步这里) 我的文件目录如下: (标红部分是生成的处理后的文件) 如何使用gulp,请…

Java 7:使用NIO.2进行文件过滤-第2部分

大家好。 这是使用NIO.2系列进行文件过滤的第2部分。 对于那些尚未阅读第1部分的人 ,这里有个回顾。 NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API,您可以执行与java.io相同的操作,以及许多出色的功能,例如&a…

课时76.兄弟选择器(掌握)

我们先来明确一点,什么是兄弟? 比如,head和body是兄弟,必须是同级关系,如果是嵌套关系,儿子,孙子则不可以。 1.相邻兄弟选择器 CSS2 作用:给指定选择器后面紧跟的那个选择器选中的…

24v开关电源维修技巧_康佳LED液晶彩电KPS+L1900C301电源板原理与维修

康佳液晶彩电采用的KPSL1900C3-01型电源板,编号为34007728,版本号为35015686集成电路采用FAN7530FSGM300FSFR1700组合方案,输出5.1VSB/4A、24V/4A、12V/4A电压。应用于康佳LED47IS988PD、LED42M11PD、LED46MS92DC、LED42IS988PDE、LED42X5000…

课时71.后代选择器(掌握)

1.什么是后代选择器? 作用:找到指定标签的所有后代标签,设置属性。 首先你要明确什么是后代? 你的儿子,孙子,重孙子等,只要有你的血脉的,都是你的后代。 我们先来举个例子 我们想…

java小球碰撞界面设计_JavaScript实现小球碰撞特效

JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单,就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left,top属性动态的改变小球的位置。碰撞反弹球,当碰撞到容器的边缘后,进行反弹,反…

es6常用基础合集

es6常用基础合集 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,学习ES6并不…

java接口开发_如果你想学好Java,这些你需要了解

01基本知识  在学习Java之前,您需要了解计算机的基本知识,然后再学习Java。同时,您需要熟悉DOS命令、Java概述、JDK环境安装配置、环境变量配置。JDK和环境变量配置完成后,就可以编写Java程序了。02编程格式  此时&#xff0c…

从Java程序生成QR码图像

如果您精通技术和小工具,则必须了解QR码。 这些天,到处都可以找到它-在博客,网站,甚至在某些公共场所。 这在移动应用程序中非常流行,在移动应用程序中,您可以使用QR Code扫描仪应用程序扫描QR Code&#x…

课时67.标签选择器(掌握)

通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如:红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候,它都有一些套路 只要知道属性的名称,属性有什么作用,它有哪些取值,这个属性有什么注意点 …

Java 7:使用NIO.2进行文件过滤-第1部分

NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API,您可以执行与 java.io以及许多出色的功能,例如:访问文件元数据和监视目录更改等。 显然,由于向后兼容,java.io包不会消失,但是我们鼓励为…

课时66.颜色控制属性下(理解)

今天来讲解十六进制控制属性的方法,其实用十六进制表示的方式本质就是rgb,只不过它们的格式不一样而已,十六进制中是通过每两位表示一种颜色的方式来给颜色赋值。 如 #FF0000 FF----r 00----g 00----b 修改前两位相当于修改rgb中的第一…

课时57.HTML被废弃的标签(掌握)

1.为什么HTML中有一部分标签会被废弃&#xff1f; 因为当前HTML中的标签只有一个作用&#xff0c;就是用来添加语义&#xff0c;而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰了 <br><hr><font> <…

课时55.详情和概要标签(理解)

1.什么是详情和概要标签&#xff1f; 作用&#xff1a;利用summary标签来描述概要信息&#xff0c;利用details标签来描述详情信息 默认情况下是折叠展示&#xff0c;想看见详情必须点击 格式&#xff1a; <details> <summary>概要信息</summary> 详情信…

课时53.video标签(掌握)

这节课来学习一下html5中新增的标签&#xff0c;我们先来看一下&#xff0c;html5中新增了哪些标签&#xff1f; 打开W3school的网页&#xff0c;点击参考手册中的HTML/HTML5标签&#xff0c;有一个按字母顺序排列的标签&#xff0c;但凡标签后面带有5标记的&#xff0c;都是h…

Canvas制作的下雨动画

简介 在codepen上看到一个Canvas做的下雨效果动画&#xff0c;感觉蛮有意思的。就研究了下&#xff0c;这里来分享下&#xff0c;实现技巧。效果可以见下面的链接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截图&#xff1a; Canvas动画基础 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了讨论1和一些受感染的同伴2&#xff0c;他们关于我们如何在Eclipse IDE中使用JUnit 。 令人惊讶的是&#xff0c;对话带来了并非所有人都知道的一些“技巧”。 这使我有了写这篇文章的想法&#xff0c;总结了我们的演讲。 谁知道–也许有人也有新事物…

jquery文件上传控件 Uploadify

基于jquery的文件上传控件&#xff0c;支持ajax无刷新上传&#xff0c;多个文件同时上传&#xff0c;上传进行进度显示&#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有两个版本&#xff0c;一个用flash,一个是html5。html5…

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…