文档章节

前端技术学习之选择器(八)

博为峰教研组
 博为峰教研组
发布于 2017/01/09 20:31
字数 359
阅读 2
收藏 0

九,:nth-of-type(n)

    又 一个of-type,看到这里应该就明白了,这个:nth-of-type(n)是对:nth-child(n)选择器的扩展,只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不是同一种类型的子元素时,使用:nth-of-type(n)选择器来匹配父元素中特定类型的子元素就很方便了。

举例:设置偶数个段落背景色为橙色

代码例子:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>属性选择器</title>

<style type="text/css">

    .wrapper>p:nth-of-type(2){

        background-color:orange;

    }

</style>

</head>

<body>

<div class="wrapper">

  <div>我是一个Div元素</div>

  <p>我是一个段落元素</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

  <div>我是一个Div元素</div>

  <p>我是一个段落</p>

</div>

</body>

</html>

 

运行效果:

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

 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
WEB前端学习CSS面试题汇总,来巩固一下你的知识吧

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/05/11
0
0
WEB前端开发学习:调试过很多次bug,你了解Chrome控制台的$符的用法吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/06/01
0
0
11个优秀的Android开发开源项目

一、 一个类似微信的时光轴效果 项目地址 https://github.com/ljtyzhr/TimeLine 二、 安卓选择器类库,包括日期、时间、单项、双项选择器、城市地址选择器 项目地址 https://github.com/gzu...

codeGoogle
2017/12/03
0
0
JQuery 选择器与过滤器(随手笔记)

一、表单选择器 虽然可以使用常规的选择器来对表单的元素进行定位,但还是不能满足多变的需求,所以这里我们一起来学习一下JQuery表单选择器。 例如: 二、表单过滤器 JQuery提供了四种表单过...

Red_Ant_hoyl
2018/07/25
0
0
34岁!100天!学会Java编程(Day20-Day28)—Web前端编程

什么是Web前端? 引子:Web编程深似海 原计划用8天时间进行Web前端的学习,结果拖延了,原因自然是对这部分内容学习的难度估计不足。我的方法还是试图一开始了解web编程的全貌,结果发现整个...

魏小筠
2017/11/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

个人服务容器化和监控集成

1.前景 自己比较喜欢玩机器,目前手上有4台常用的机器 asw 1核1G 阿里云 1核2G 腾讯云 1核1G 百度云 2核4G

MrPei
10分钟前
2
0
Rancher源码编译

源码包准备 mkdir -p $GOPATH/src/github.com/ranchercd $GOPATH/src/github.com/ranchergit clone https://github.com/rancher/rancher.gitcd ranchergit checkout v2.2.3-rc9 注1......

深蓝苹果
14分钟前
3
0
7个理由,给你推荐这款“秒杀Excel”的分析神器!

谈到数据分析,自然离不开赖以使用的数据分析工具。 商业智能时代,可用于数据分析的工具有很多,Python、R......还有各式各样的专业工具。其中,Excel也是推荐的比较多的一种,尤其是刚入门...

朕想上头条
28分钟前
2
0
Spring5 源码分析-容器刷新-解析配置类-主流程

上一篇:Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法 此篇是上一篇方法中非常非常重要的功能,也是Spring核心功能,完成所有的BeanDefinition注册。 详细的主流程,如...

特拉仔
29分钟前
2
0
Python 3.8.0 正式发布 更新内容

Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的...

阮鹏
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部