E:nth-child(n)  表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n)  表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算 【先理解nth-of-type(n)】
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点 ,例如<p></p>不能存在空格
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素的父元素只有一个子节点。注意：子节点不包含文本节点，【<div><b></b></div>  b:only-child】
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点【
<p><span>123</span><a href="">456</a></p> 
p *:only-of-type
/*父级下某类型的标签仅有一个时该唯一元素会被选中*/
】
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>last-of-type与last-child区别</title>

    <style>

        *{margin:0; padding:0;}

        body *:last-of-type{

            height:30px;

            line-height:30px;

            border:1px solid red;

            background:yellow;

            margin-bottom:5px;

        }

    </style>

    </head>

<body>

   <p>001</p>

   <h5>111</h5>

   <p>002</p>

   <p>003</p>

   <h5>222</h5>

   <p>004</p>

   <p>005</p>

</body>

</html>

1-2:CSS3课程入门之结构选择的更多相关文章

  1. 1-3:CSS3课程入门之伪类和伪元素

    E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkb ...

  2. 1-1:CSS3课程入门之属性选择器

    div[name=jewave] 选取属性名为name且属性值是"jewave"的元素 div[name^=jewave]选取属性名为name且属性值以"jewave&q ...

  3. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  4. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  5. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

  6. HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版

    HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...

  7. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  8. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  9. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

随机推荐

  1. HTTP调试工具：Fiddler介绍

    原文发布时间为:2010-08-25 -- 来源于本人的百度文章 [由搬家工具导入] 这个工具我已经使用比较长时间了，对我的帮助也挺大，今天我翻译的微软的文章，让更多的朋友都来了解这个不错的工具，也是 ...

  2. 自定义JS类，并扩展其方法和属性

    function CT() { } CT.prototype.P = "TTT"; CT.Test = function () { alert(arguments[0]); }; ...

  3. 反射$change属性问题

    写DB框架的时候,使用反射获取属性的时候,多了一个$change属性,当场一脸懵比.   stackoverflow 发现是Android Studio2.0的.Instant Run 的问题.  解 ...

  4. LeetCode OJ-- Generate Parentheses *

    https://oj.leetcode.com/problems/generate-parentheses/ 输入n产生n个( ,n个 )组成的所有合法的括号组合. 现在纸上画画,找到规律: 1.每一 ...

  5. 寒假week1---二分查找（二分枚举）

    寒假week1---二分查找(二分枚举)1.适用条件:要查找(枚举)的集合有序 && 查找(枚举)的“条件”具有单调性2.什么是“条件”:example: 1.给定一个有序数组,从中查 ...

  6. vue开发小程序简介

    开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前 ...

  7. BZOJ 4543 2016北京集训测试赛（二）Problem B: thr 既 长链剖分学习笔记

    Solution 这题的解法很妙啊... 考虑这三个点可能的形态: 令它们的重心为距离到这三个点都相同的节点, 则其中两个点分别在重心的两棵子树中, 且到重心的距离相等; 第三个点可能在重心的一棵不同 ...

  8. Delphi Integer 转成单字节

    整形不能超过256 b:=Byte(StrToInt(n)); var   s: string;   b: Byte; begin   s := Edit1.Text;   b := Byte(Str ...

  9. ios编程规范

    允许使用较长的描述尽量不要使用缩写,而是将完整的意思写出来.源于代码的维护可能会被不同文化背景的programmer阅读 适当的命名前缀,比如给变量,协议等,不要给方法加前缀 方法命名规则一般以小写字 ...

  10. MR之SequenceFile具体解释

    package com.leaf.hadoop.second; import java.util.Random; import org.apache.hadoop.conf.Configuration ...