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元素的样式都统一收集起来写在一个地方 ...
随机推荐
- DNF游戏币拼团
DNF游戏币拼团活动方案 活动目的: 通过拼团的方式来实现老拉新和现实新用户转换,可以通过有需求的用户来告知好友来进行用户裂变 活动时间:预计时间2018.11.11-2018.11.23 SLOGA ...
- poj 1905 图形推算+二分
参考博客: 题意: 一根两端固定在两面墙上的杆 受热弯曲后变弯曲 求前后两个状态的杆的中点位置的距离 分析:见博客 代码: #include<stdio.h> #include<io ...
- 【洛谷】P1229快速幂
题目链接:https://www.luogu.org/problemnew/show/P1226 题意:求b^p % m之后的结果 题解:快速幂模板 代码: #include<iostream& ...
- DDOS到底是什么，怎么预防，看看就明白了
可怕的DDOS怎么预防 分布式拒绝服务(DDoS: distributed denial-of-service)攻击是恶意破坏目标服务器.服务或网络的正常通信量的企图,其方法是用大量Internet通 ...
- webapi 给自己挖的坑
这次做项目,负责开发web api. 自己给自己挖了个坑.在所有的api接口前面都加上一个static . 结果检查路由配置.代码等等都找不到问题所在. 最后在一个同事的提醒下,原来是static给惹 ...
- 21-7-数组相关api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- zic - 时区编辑器
总览 zic [ -v ] [ -d directory ] [ -l localtime ] [ -p posixrules ] [ -L leapsecondfilename ] [ -s ] [ ...
- 一个服务io占满，服务器无响应
(1).服务器io占满,服务无响应, sar -q -f /var/log/sa/sa28 上图显示plist-sz 增加了一倍 plist-sz 说明:进程列表中的进程(processes)和线程 ...
- vue 学习三 v-model 表单绑定输入 以及修饰符的用处
v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...
- Java中volatile关键字及其作用是什么？
在 Java 多线程中如何保证线程的安全性?那我们可以使用 Synchronized 同步锁来给需要多个线程访问的代码块加锁以保证线程安全性.使用 synchronized 虽然可以解决多线程安全问题 ...