关于结构化伪类的案例

                    结构化伪类的案例

开发工具与关键技术：DW html和css
作者：沈金凤
年级：18级（4）班
撰写日期：2019年2月21日
伪类分很多种例如：UI伪类，结构化伪类，伪元素，CSS3新增伪类选择器(not and target)等等，下面我要为大家介绍的是结构化伪类，引用老师的解释
结构化伪类选择器如下：
Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是元素
Selector:first-child : 表示一组同胞元素中的第一个元素。
Selector:last-child : 表示一组同胞元素中的最后一个元素。
Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。
还有其他的几个结构化选择器：和上面的类似
Selector:first-of-type
Selector:last-of-type
Selector:nth-of-type(n)
Selector:nth-last-of-type(n)
Selector:empty

结构化伪类案例的源代码如下：

Css样式图如下：

效果图如下：

关于结构化伪类的案例相关推荐

CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
elasticsearch 结构化搜索_在案例中实战基于range filter来进行范围过滤
2019独角兽企业重金招聘Python工程师标准>>> 课程大纲 1.为帖子数据增加浏览量的字段 POST /forum/article/_bulk { "update&q ...
es过滤指定数据 java_elasticsearch 结构化搜索_在案例中实战基于range filter来进行范围过滤...
课程大纲 1.为帖子数据增加浏览量的字段 POST /forum/article/_bulk { "update": { "_id": "1" ...
html分为哪两种,css伪类分为哪几种
css伪类分为UI伪类和结构化伪类两种.UI伪类分为链接伪类.focus伪类和target伪类.结构化伪类分为[:first-child].[:last-child]和[:nth-child]. CS ...
伪类和伪元素的区别，以及伪元素的妙用（上）
伪类到底是什么呢,与伪元素又有啥关联呢小白程序员-博客第二篇说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止 ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
自学前端第十五天:伪类伪元素和属性选择器和精灵图
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果 ...

关于结构化伪类的案例

关于结构化伪类的案例相关推荐

最新文章

热门文章