CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法
一.通过伪类选择器查找单个标签元素
html结构
<div>
<a herf='#'>导航1</a>
<a herf='#'>导航2</a>
<a herf='#'>导航3</a>
</div>
/* 匹配第一个子元素,并且为a标签 */
div a:first-child{}
注意:如果第一个元素不是a,则匹配失败
/* 匹配最后一个子元素,且为a标签 */
div a:last-child{}
/* 匹配第二个子元素,且为a标签 */
div a:nth-child(2){}
/* 匹配倒数第二个子元素,且为a标签 */
div a:nth-last-child(2){}
二.通过结构伪类选择器,查找多个标签元素
html结构
<div>
<a herf='#'>导航1</a>
<a herf='#'>导航2</a>
<a herf='#'>导航3</a>
<a herf='#'>导航4</a>
<a herf='#'>导航5</a>
</div>
/* 匹配偶数行,并且为a标签元素;2n或者even */
div a:nth-child(2n){}
/* 匹配奇数行,并且为a标签元素 ;2n+1、2n-1或者是odd*/
div a:nth-child(2n+1){}
/* 匹配前五行,并且为a标签元素 */
div a:nth-child(-n+5){}
/* 匹配从第五行到最后,并且为a标签元素 */
div a:nth-child(n+5){}
三.使用中易错点总结
html结构
<div>
<a herf='#'>导航1</a>
<a herf='#'>导航2</a>
<a herf='#'>导航3</a>
</div>
<div>
<a herf='#'>导航1</a>
</div>
/* 匹配第二个div,并且为a标签 */
错误写法: div a:nth-child(2){}
正确写法: div:nth-chid(2) a{}
总结:
html结构
<div>
<a herf='#'>导航1</a>
<div> div内容部分 </div>
<a herf='#'>导航3</a>
<a herf='#'>导航4</a>
<a herf='#'>导航5</a>
</div>
需求:我要匹配div下面的第二个a标签
css 写法1:div a:nth-child(3){} /*缺点是如果两个a直接有很多行内容需要数比较麻烦*/
CSS 写法2:div a:nth-of-type(2){} /* 可以直接匹配到第二个 a 标签 */
CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法的更多相关文章
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS选择器之伪类选择器(交互)
:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...
- CSS基础-5 伪类
一.伪类 我们以a标签为例 伪类标签分为4类 1. 设置超链接默认的样式 a:link {属性:值;.....} 或者 a { 属性: 值;} 推荐使用这种方式 2 ...
随机推荐
- Oracle存储过程游标for循环怎么写
一.不带参数的游标for循环 首先编写存储过程的整体结构,如下: create or replace procedure test_proc is v_date date; --变量定义 begin ...
- ES在项目中的测试
1.application.yml server: port: ${port:40100}spring: application: name: xc-search-servicexuecheng: e ...
- Win10 Chrome 在DPI缩放下导致界面放大问题 解决方案
支持:54.0.2840.59 m (64-bit) 以下大多数版本,具体未测试.如有问题可以反馈一下. 方法1:为程序设置"高DPI设置时禁用显示缩放. 方法2:为程序添加启动参数: /h ...
- String 、StringBuffer、StringBuilder的区别
String:字符串常量 StringBuffer:字符串变量:线程安全的 StringBuilder:字符串变量:线程非安全的 三者执行速度比较:StringBuilder > String ...
- smbclient 使用方法
1,列出某个IP地址所提供的共享文件夹 smbclient -L 198.168.0.1 -U username%password 2,像FTP客户端一样使用smbclient smbcl ...
- GDB调试增强篇
GDB中应该知道的几个调试方法 七.八年前写过一篇<用GDB调试程序>, 于是,从那以后,很多朋友在MSN上以及给我发邮件询问我关于GDB的问题,一直到今天,还有人在问GDB的相关问题.这 ...
- [BUUCTF]REVERSE——[V&N2020 公开赛]CSRe
[V&N2020 公开赛]CSRe 附件 步骤: 例行检查,无壳儿,但是有NET混淆,使用de4dot工具进行处理 之后用dnSpy打开,从入口点开始看程序 找到有关flag的信息 flag由 ...
- CF1494B Berland Crossword 题解
Content 有一种叫做 Berland crossword 的拼图游戏.这个拼图由 \(n\) 行 \(n\) 列组成,你可以将里面的一些格子涂成黑色.现在给出 \(T\) 个这样的拼图,每个拼图 ...
- JAVA开发 环境基础 IDEA 常用快捷键
java 源代码运行必须先用javac编译生成字节码文件 XXX.class运行 java XXX 进行运行 环境变量classpath:已编译的字节码文件搜索路径--临时配置: set classp ...
- SpringBoot基础篇(一)
1.前言 什么是SpringBoot:springboot是当下一套流行的J2EE框架.借助微服务的思想.将业务分成一个个的服务.通过spring-cloud进行整合.最后通过spring-data进 ...