前言

顺序

<!DOCTYPE html>
<html lang="zh" >
<head><meta charset="utf-8"><style>* {margin: 0;padding: 0;}body > div{word-spacing: -5px;background-color:#fff !important;}.c {width: 50%;height: auto;/*float: left;*/display: inline-block;}.c > div {margin: 10px;padding: 5px;border: 20px solid #666;width: 50px;height: 50px;}div:first-child {background-color:#0fc;}div:nth-child(2) {background-color:#cf0;}div:nth-child(3) {background-color:#cfc;}div:last-child {background-color:#3f0;}div:nth-last-child(2) {background-color:#333;}</style>
</head>
<body><div><div class="c"><div></div><div></div><div></div><div></div><div></div></div><div class="c"><div></div><div></div><div></div><div></div><div></div></div><div>
</body>
</html>

:first-child 作为第1个子元素时生效。等效的写法:nth-child(1)。
:nth-child(2) 作为第2个子元素时生效。
:nth-child(3) 作为第3个子元素时生效。
:last-child 作为最后1个子元素时生效，或者，作为倒数第1个子元素时生效。等效的写法:nth-last-child(1)。
:nth-last-child(2) 作为倒数第2个子元素时生效。

<body><div> 1<div class="c"> 2<div></div> 3<div></div> 4<div></div> 5<div></div> 6<div></div> 7</div><div class="c"> 8<div></div> 9<div></div> 10<div></div> 11<div></div> 12<div></div> 13</div><div>
</body>

div:first-child匹配的元素：1、2、3、8
div:nth-child(2)匹配的元素：4、8、10
div:nth-child(3)匹配的元素：5、11
div:last-child匹配的元素：1、7、8、13
div:nth-last-child(2)匹配的元素：2、6、12

【CSS 伪类】顺序相关推荐

css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
html之CSS设计（CSS伪类、优先级、字体属性、背景属性）
文章目录一.CSS伪类二.CSS优先级三.CSS属性 1.CSS颜色设置 2.颜色属性 3.背景属性本篇文本主要介绍html编程中的CSS伪类.优先级.字体属性.背景属性,前两种是CSS选择器 ...
2天驾驭div+css_老婆竟然只知道几个css伪类，不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用.我也拗不过她,而且其实我也挺佩服的.所以就教她了.最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类 ...
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果. 语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class: ...
【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
CSS伪类选择器详细讲解
前言伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大.这样程序员的工作量大,也违背了CSS诞生的作用, ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
:empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
CSS特效（1）——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...

【CSS 伪类】顺序

前言

顺序

【CSS 伪类】顺序相关推荐

最新文章

热门文章