css选择器 nth-child
html代码:
<div>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
</div>
一、nth-child
1.1、nth-child(n) 父元素下的第n个子元素,n必须大于0,索引都是从1开始。
div p:nth-child(2){
background: skyblue;
}
ps、这里仅仅说是父元素的第几个子元素,而并没有限制该类型的子元素。比如:
<div>
<h3>天气</h3>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
</div>
运行之后:
1.2、nth-child(odd) 父元素下的奇数子元素 等同于 nth-child(2n-1)
div p:nth-child(odd){
background: skyblue;
}
ps、这货是区分子元素类型的,比如:
<div>
<h3>天气</h3>
<h3>天气</h3>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
</div>
1.3、nth-child(even) 父元素下的偶数子元素 同样区分子元素类型 等同于nth-child(2n)
div p:nth-child(even){
background: skyblue;
}
1.4、nth-child(an+b) 公式计算 n可以为0
div p:nth-child(2n+1){
background: skyblue;
}
ps、区分子元素类型的,父元素的an+b个子元素,但是该元素必须是p
1.5、first-child 选择父元素下的第一个子元素 如果第一个子元素不是该类型,选择不到 等同于 nth-child(1)
div p:first-child{
background: skyblue;
}
1.6、last-child 选择父元素下的最后一个子元素 如果最后一个子元素不是该类型,选择不到
div p:last-child{
background: skyblue;
}
二、nth-of-type 匹配属于父元素的特定类型的第 N 个子元素的每个元素 忽略不是该类型的元素的存在
<div>
<h3>天气</h3>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
<p>多云转晴</p>
</div>
div p:nth-of-type(1){
background: skyblue;
}
css选择器 nth-child的更多相关文章
- CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
- css selector regexp css选择器 正则表达式 css 参考手册
jQuery 选择元素 a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- HTML 学习笔记 CSS(选择器4)
CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 网站CSS选择器性能讨论
CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...
随机推荐
- 关于datatable的数据绑定问题
最近做项目掉在数据绑定这个小坑里了,最后发现问题其实很简单,只是官方的文档描述可能不太清除导致的吧.首先贴上官网地址:http://www.datatables.club/ 关于这个插件的简单使用就不 ...
- bata3
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- ubuntu16.04+matlab r2015b VideoReader报错
读取.mp4出错 需要安装gstreamer0.10-ffmpeg ` sudo add-apt-repository ppa:mc3man/gstffmpeg-keep sudo apt-get u ...
- 在虚拟机中安装Ubuntu详细过程
参考:http://blog.csdn.net/u013142781/article/details/50529030
- 基于MongoDB2.6版本配置MongoDB主从复制集群架构
1:集群环境说明:mongodb1:192.168.43.10.mongodb2:192.168.43.11.mongodb3:192.168.43.12.且基于主机名相互通信/etc/hosts文件 ...
- PAT 甲级 1142 Maximal Clique
https://pintia.cn/problem-sets/994805342720868352/problems/994805343979159552 A clique is a subset o ...
- windows多线程(六) 互斥量Mutex与关键段CriticalSection比较
一.关键段CS 和 互斥量Mutex 的相同点:都有线程拥有权 关键段和互斥量都有线程拥有权,即可以被一个线程拥有.在 前面讲关键段CS的文章中有说到,关键段结构体的第四个参数保存着拥有该关键段的线程 ...
- 深度学习:卷积神经网络(convolution neural network)
(一)卷积神经网络 卷积神经网络最早是由Lecun在1998年提出的. 卷积神经网络通畅使用的三个基本概念为: 1.局部视觉域: 2.权值共享: 3.池化操作. 在卷积神经网络中,局部接受域表明输入图 ...
- 一千个不用Null的理由
原文链接:http://www.importnew.com/27378.html 原文出处: xrzs 港真,Null 貌似在哪里都是个头疼的问题,比如 Java 里让人头疼的 NullPointer ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...