css---5 only-child or nth-of-type
1 _nth-child系列
:nth-child（index）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-child() {
background: #f00;
}
/*
ul > li:nth-child(2n) {
background: #ff0;
}
ul > li:nth-child(2n+1) {
background: #0f0;
}
ul > li:nth-child(n+4) {
background: #abcdef;
}
ul > li:nth-child(odd) {
background: red;
}
ul > li:nth-child(even) {
background: blue;
}
*/
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<hr>
<div>-</div>
<div>-</div>
<div>-</div>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2 :first-child 第一个孩子
:first-child {
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Child</title>
<style type="text/css">
:first-child {
border: 1px solid;
}
</style>
</head>
<body>
<div id="wrap">
<div>-</div>
<div>-</div>
<div>-</div>
</div>
<div>-</div>
</body>
</html>
:first-child
3 #wrap > div:first-child
#wrap > div:first-child {
color: deeppink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Child</title>
<style type="text/css">
#wrap > div:first-child {
color: deeppink;
}
</style>
</head>
<body>
<div>-</div>
<div>-</div>
<div>-</div>
<div id="wrap">
<div>-</div>
<div>-</div>
<div>-</div>
</div>
<div>
<div>-</div>
<div>-</div>
<div>-</div>
</div>
</body>
</html>
4 :last-child 最后一个孩子
:last-child {
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-Child</title>
<style type="text/css">
:last-child {
border: 1px solid; }
</style>
</head>
<body>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
</body>
</html>
5 #wrap > div:last-child
#wrap > div:last-child {
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-Child</title>
<style type="text/css">
#wrap > div:last-child {
border: 1px solid;
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
</body>
</html>
last-child
6 nth-last-child(3) 元素倒数坐标
ul > li:nth-last-child() {
background: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-last-child() {
background: #f00;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<hr>
<div>-</div>
<div>-</div>
<div>-</div>
<div>
<div>-</div>
<div>-</div>
<div>-</div>
</div>
<div>
<div>-</div>
<div>-</div>
<div>-</div>
</div>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
7 article:only-child 只有一个孩子
article:only-child {
background: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
background: #f00;
}
</style>
</head>
<body>
<section>
<article></article>
<article></article>
</section>
<section>
<article></article>
</section>
<section>
<div></div>
<article></article>
<div></div>
</section>
<section>
<div></div>
<article></article>
<article></article>
<div></div>
</section>
</body>
</html>
only child
nth-of-type
div:nth-of-type(index)
div:nth-of-type() {
color: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
/*div:nth-child(2) {
color: #f00;
}*/
div:nth-of-type() {
color: #f00;
}
</style>
</head>
<body>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
<div>-</div>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
</body>
</html>
first-of-type 一个孩子或者第一个孩子
div:first-of-type {
color: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
color: #f00;
}
</style>
</head>
<body>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
<div>-</div>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
</body>
</html>
Last-of-type 最后一个孩子
div:last-of-type {
color: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
color: #f00;
}
</style>
</head>
<body>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
<div>-</div>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
</body>
</html>
nth-last-of-type 中间孩子或第一个孩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">
/*div:nth-last-child(2) {
color: #f00;
}*/
div:nth-last-of-type() {
color: #f00;
}
</style>
</head>
<body>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
<div>-</div>
<div>-</div>
<section>
<div>-</div>
<div>-</div>
<div>-</div>
</section>
</body>
</html>
only-of-type 唯一的一个标签元素
article:only-of-type {
background: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
background: #f00;
}
</style>
</head>
<body>
<section>
<article></article>
<article></article>
</section>
<section>
<article></article>
</section>
<section>
<div></div>
<article></article>
<div></div>
</section>
<section>
<div></div>
<article></article>
<article></article>
<div></div>
</section>
</body>
</html>
not（元素节点）
div > a:not(:last-of-type) {
border-right: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
margin: ;
padding: ;
border: none;
}
a {
text-decoration: none;
color: #;
font-size: 14px;
display: block;
float: left;
width: 100px;
height: 30px;
}
div {
width: 800px;
margin: auto;
}
div > a:not(:last-of-type) {
border-right: 1px solid red;
}
</style>
</head>
<body>
<div>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</div>
</body>
</html>
not
empty
div:empty {
background: #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty</title>
<style type="text/css">
div {
height: 200px;
background: #abcdef;
}
div:empty {
background: #f00;
}
</style>
</head>
<body>
<div></div>
<div>Second</div>
<div></div>
<div>Third</div>
</body>
</html>
empty
css---5 only-child or nth-of-type的更多相关文章
- div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- CSS 样式的优先级
1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...
- 转：SELENIUM TIPS: CSS SELECTORS
This page will show you some CSS rules and pseudo-classes that will help you move your XPATH locator ...
- 二、CSS 基本介绍
[ 显示目录 ] [ 隐藏 ] 目录 基本概念 CSS组成部分 CSS的规则 引入CSS样式的方法 颜色的表示 CSS Reset 选择器分类 浮动 盒子模型 box-sizing属性 实例:实现“田 ...
- 2014年度辛星css教程夏季版第二节
第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...
- selenium css（转）
如果button上有class属性的,如: <button id="ext-eng=1026" class="x-right-button"...&g ...
- HTML+CSS笔记 CSS入门
简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...
- CSS 1. 选择器
1.css的介绍 CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...
随机推荐
- JUC源码分析-线程池篇（一）：ThreadPoolExecutor
JUC源码分析-线程池篇(一):ThreadPoolExecutor Java 中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池.在开发过程中,合理地使用线程池 ...
- Spring Boot Dubbo 应用启停源码分析
作者:张乎兴 来源:Dubbo官方博客 背景介绍 Dubbo Spring Boot 工程致力于简化 Dubbo | grep tid | grep -v "daemon" tid ...
- Linux 安装 python3.6
Linux下安装Python3.6和第三方库 如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!! ...
- 8-vim-移动命令-03-段落切换和括号切换
1.段落切换 vi使用空行来区分段落 在程序开发时,通常一段功能相关的代码会写在一起--之间没有空行 命令 功能 { 上一段 } 下一段 2.括号切换 在程序世界中,() [] {}使用频率很高,而且 ...
- VMware中 CentOS7挂载windows共享文件夹
在编译自己的hadoop时,不想再次在虚拟机中下载jar包,就想到了挂载自己本地的maven仓库,使用本地仓库来进行编译,这里就需要使用VMware的VMware Tools了,直接复制官方文档如下 ...
- Berry 指令设计
Berry 脚本源代码需要被编译为字节码指令流才能被 Berry 虚拟机执行.本文将详细地讲解 Berry 字节码指令(下面简称指令)的设计和实现.为了达到这个目的,本文由 3 部分构成:第 1 小节 ...
- forEarch 和 for in
forEarch 遍历数组,遍历的过程中不能被终止,必须每一个值遍历一遍后才能停下来,for in遍历对象中的属性 代码: <!DOCTYPE html> <html lang=& ...
- Deployment的使用
RC和RS的功能基本上是差不多的,唯一的区别就是RS支持集合的selector. RC|RS是Kubernetes的一个核心概念,当我们把应用部署到集群之后,需要保证应用能够持续稳定的运行,RC|RS ...
- 归并排序c语言
void mergeAdd(int arr[], int left, int mid, int right, int *temp){ int i = left; ; int k = left;//临时 ...
- 随意从Android端抓取一些数据包看到的协议
如题,就打开了某银行客户端,登录,查询余额,退出 打开支付宝钱包,登录,来回转账到余额宝 中间收到微信的消息 看到了以下协议: 银行客户端的:DNS (连接银行网站时使用,网站server返回也是用的 ...