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元素的样式都统一收集起来写在一个地方 ...
随机推荐
- 通过start.spring.io生成的springboot项目，导入IDE后POM第一行报错
通过problem控制台查看,显示unknown 尝试降低springboot版本,问题没了,应该是与maven jdk等版本冲突导致 这里JDK 1.8 mave 3.6.1 降低springb ...
- SQL Server2012 Offset Fetch子句 分页查询
在本教程中,将学习如何使用SQL Server OFFSET FETCH子句来限制查询返回的行数.OFFSET和FETCH子句是ORDER BY子句的选项. 它们用于限制查询返回的行数.以下是OFFS ...
- （数据科学学习手札59）从抓取数据到生成shp文件并展示
一.简介 shp格式的文件是地理信息领域最常见的文件格式之一,很好的结合了矢量数据与对应的标量数据,而在Python中我们可以使用pyshp来完成创建shp文件的过程,本文将从如何从高德地图获取矢量信 ...
- async / await对异步的处理
虽然co是社区里面的优秀异步解决方案,但是并不是语言标准,只是一个过渡方案.ES7语言层面提供async / await去解决语言层面的难题.目前async / await 在 IE edge中已经可 ...
- 转： Meshlab简介
本文翻译自Meshlab主页:http://www.meshlab.net/ MeshLab是用于处理和编辑3D三角形网格的开源系统.它提供了一组用于编辑,清理,修复,检查,渲染,纹理和转换网格的工具 ...
- PD ZD
PD TO ZD simple one without . SORT FIELDS,,PD,A,,,PD,A) OUTREC FIELDS,,PD,ZD,LENGTH, ,,PD,ZD,LENGTH, ...
- thrift 的一些相关知识
thrift是一个很好用的跨语言的rpc框架. 但是其也有一些需要注意的问题: 第一: 发现其对于类型检查没有那么严格: 最近工作中发现是可以把一个int类型直接付给string,而没有任何wa ...
- IPv4 IPv6
IP提供了一种best-effort,connection-less数据delivery服务. best-efforty意味着它不保证IP数据段会成功到达目的地.当error发生时,IP通常选择丢弃d ...
- Codeigniter 列出所有控制器和控制器的方法(类似路由列表)
我的思路是: 读取控制器文件夹下的所有 php 文件 获取父级的控制器的方法的不应该出现在每个控制器的路由中,所以需要排除父级控制器的方法 读取 控制器文件夹下的 php文件的类名和方法 下面的代碼是 ...
- Eclipse+Marven + spring mvc 新建一个 Hello world 项目
1. 打开Eclipse,菜单 File->New->Marven Project. 2. 点击 Next, 3. 选择 marv ...