继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第5天 CSS3中的选择器(二)

周帅帅Love
关注TA
已关注
手记 86
粉丝 5
获赞 96

课程名称:十天精通CSS3

课程章节: 征服CSS3选择器(上)

主讲老师:大漠

课程内容:

今天学习的内容包括:选择器first-of-type的使用?选择器nth-of-type(n)的使用?选择器last-of-type的使用?选择器nth-last-of-type(n)的使用?选择器only-child的使用?选择器only-of-type的使用?

课程收获:

:first-of-type选择器就是指定了元素的类型,主要用来定位一个父元素下的某个类型的第一个子元素。我们实现的效果有当我们一个div中含有多个p标签时,我们想要选择第一个p标签,就可以使用这个选择器。
图片描述

:nth-of-type(n)选择器只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素。其中n可以是具体的整数,也可以是表达式,还可以是关键词。我们还可以设置偶数段数的标签。

:last-of-type选择器选择是父元素下的某个类型的最后一个子元素。例如.wrapper > div:last-of-type,表示我们选择的是wrapper这个类名中最后一个div的标签。

:nth-last-of-type(n)选择器选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法和:nth-last-child(n)选择器一样。
图片描述

:only-child选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。意思就是说匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

:only-of-type选择器用来选择一个元素是它的父元素的唯一的一个相同类型的子元素。简单来说就是当一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用:only-of-type选择器就可以选中这个元素中的唯一的一个类型子元素。
图片描述

今天学习了边框的6-10到6-15的6个小结,花费了34分钟,今天学习了很多选择器的使用,其中如果我们在网站中的标签中有很多段落,我们只想要给第一个段落设置颜色或者背景色我们就可以使用first-of-type来实现效果。如果我们想要选择最后面的段落,我们可以使用nth-last-of-type。当一个父元素只有唯一的一个子元素时,我们还可以除了直接选择这个子元素,还可以使用only-child去匹配唯一的这个元素。这些选择器可以让我们更精确地选择我们需要设置的元素,从而对需要的元素设置不同的效果。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP