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元素的样式都统一收集起来写在一个地方 ...
随机推荐
- 使ie6/7/8支持css3的方法
使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...
- js 点击获取验证码后的倒数60s
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script ...
- 微信小程序之模板消息推送
最近在用sanic框架写微信小程序,其中写了一个微信消息推送,还挺有意思的,写了个小demo 具体见官方文档:https://developers.weixin.qq.com/miniprogram/ ...
- 伪类checked
困惑了好久的复选框自定义样式终于有了谜底,原来就是一个 :checked 伪类 他的意思就是 匹配任意被勾选/选中的radio(单选按钮),chexked(复选框),或者option(select项) ...
- memset函数及其用法，C语言memset函数详解
在前面不止一次说过,定义变量时一定要进行初始化,尤其是数组和结构体这种占用内存大的数据结构.在使用数组的时候经常因为没有初始化而产生“烫烫烫烫烫烫”这样的野值,俗称“乱码”. 每种类型的变量都有各自的 ...
- mysql-5.5.17-win64 安装方法
双击mysql-5.5.17-win64.msi,即开始安装,出现如下界面 2 点击next,出现如下界面,默认为Typical,改选为Custom,单击Next 3 选择MySQL Server后, ...
- Can't finish GitHub sharing process Successfully created project 'springcloud-parent' on GitHub,
解决Can't finish GitHub sharing process Successfully created project '' on GitHub, but initial push fa ...
- Eureka的表兄弟Zookeeper理论基础
Eureka的表兄弟Zookeeper 简单介绍 Zookeeper是一个开源的分布式应用程序协调服务器,主要功能包括配置维护,域名服务,分布式同步,集群管理等 主要功能简介 一.配置维护 分布式系统 ...
- springMVC快速入门 共分为五步
springMVC快速入门 共分为5步分别为: 1 导入依赖 2 spring-mvc.xml 配置 3 web.xml配置 4 自定义一个核心控制类 5 页面配置 详细步骤以及代码 ...
- 常用Jquery前端操作
input只能输入正整数 onkeyup="this.value=this.value.replace(/\D/g,'')" if(!confirm("删除后无法恢复,确 ...