美文网首页
CSS结构伪类选择器

CSS结构伪类选择器

作者: 社会主义顶梁鹿 | 来源:发表于2020-06-19 15:08 被阅读0次

结构伪类选择器主要根据文档结构来选择元素,常用于根据父级元素选择里面的子元素。

元素:选择符{}    

一、   nth-child(n)    默认n自加

nth-child(even)      even偶数关键字   odd奇数关键字

(1)n可以是数字、关键字和公式

(2)n如果是数字,就是选择第n个子元素,里面数字从1开始

(3)n可以是,even偶数关键字,odd奇数关键字

(4)n可以是公式,如果n是公式,则从0开始计算,但是第0个元素或超出元素个数会被忽略。

公式:2n偶数(隔行变色的实现)    2n+1奇数    n+5从第五个开始到最后(包含第五个)    -n+5前五个(包含第五个)

二、nth-of-type(n)

nth-of-type(n)用法与nth-child(n)一样,唯一的区别在于子元素是多种情况下,nth-child(n)无法实现

nth-child(n)运行流程:会把指定元素中的所有子元素排列序号,按照序号找到对应的子元素,然后查看验证对应的子元素标签名。

nth-of-type(n)运行流程:会把指定元素中的所有能对应上子元素标签名的子元素进行排列序号。

相关文章

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • CSS3选择器--结构性伪类选择器

    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选...

  • CSS3属性选择器

    CSS3中属性选着器增加了3个 结构性伪类选择器 CSS3结构性伪类选择器 CSS3选择器详解二 第二部分小节 、...

  • web-6

    目录◆ 结构伪类选择器◆ 伪元素◆ 标准流◆ 浮动◆ 清除浮动 一、结构伪类选择器 目标:能够使用 结构伪类选择器...

  • css3-1

    之前学过的选择器 属性选择器 伪类选择器 结构选择器 结构伪类选择器 结构为类的的问题 empty target伪...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

网友评论

      本文标题:CSS结构伪类选择器

      本文链接:https://www.haomeiwen.com/subject/zdbvxktx.html