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元素的样式都统一收集起来写在一个地方 ...
随机推荐
- VIM编辑器进阶配置
vim自定义设置 可以选择需要的功能添加至 ~/.vimrc 打开注释使之生效. " 让 vim 关闭所有扩展的功能,尽量模拟 vi 的行为. set nocompatible ...
- C# WinForm 访问webService天气预报
1.直接添加服务引用 右键引用 -->添加服务引用 这样的好处是可以直接当成类用 简单 麻烦的地方就是地址是死的 代码如下: private void button1_Click(object ...
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- 21-7-数组相关api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP算法之罗马数字转整数
罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1.12 ...
- Android开发 MediaPlayer入门_播放本地视频
前言 MediaPlayer,可以播放视频/音频,并且它支持本地和网络文件的播放.本片博客作为入门教程,先以最通俗的方式解释播放文件本地视频.(如果你嫌MediaPlayer还是太麻烦可以试试选择Vi ...
- vue-cli 新手 搭建项目 一
新手入坑vue 搭建项目 一.安装 vue-cli 1.打开cmd 输入命令(已自行安装好npm node等) npm install --global vue-cli (全局安装) 二.创建项 ...
- Download Kali Linux
https://www.kali.org/downloads/
- thinkphp 输入过滤
永远不要相信客户端提交的数据,所以对于输入数据的过滤势在必行,我们建议: 开启令牌验证避免数据的重复提交: 使用自动验证和自动完成机制进行初步过滤: 使用系统提供的I函数获取用户输入数据: 对不同的应 ...
- <转载>深入 理解char * ,char ** ,char a[ ] ,char *a[] 的区别
C语言中由于指针的灵活性,导致指针能代替数组使用,或者混合使用,这些导致了许多指针和数组的迷惑,因此,刻意再次深入探究了指针和数组这玩意儿,其他类型的数组比较简单,容易混淆的是字符数组和字符指针这两个 ...