前端03

作者: 迷路了吗_67f1 | 来源:发表于2018-11-19 19:25 被阅读0次
1.伪类选择器

伪类专门用来表示元素的一种特殊的状态

选择器 含义
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
2伪元素选择器
选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
3选择器的优先级

内联样式
ID选择器
类和伪类选择器
元素选择器
通配*选择器
(继承的样式没有优先级)

4文本标签

em:斜体
strong:加粗
i也是斜体b也是加粗只不过i表示图标,样式标签纯表现,没有语义,em和strong语气强调.
small:变小(细则)
cite:添加书名号等等,表示参考内容
短引用:<q> </q>
长引用:<blockquote> </blockquote>
上标:sup
下标:sub
删除:del
下划线:sub
保留格式:pre
包一段代码:code

5列表

无序列表ul li(块)
有序列表ol li(块)
定义列表di dt(被定义的内容) dd(对定义内容的描述)

6单位

像素px
百分比%
em

相关文章

  • 【前端】2020-03-06

    【前端】2020-03-06

  • web前端特效演示合集

    前端特效01:使用纯CSS实现书籍3D翻页效果 前端特效02:使用纯CSS实现动态太极 前端特效03:HTML5画...

  • 01 Web 前端安全相关

    01 前端安全系列(一):如何防止XSS攻击?02 前端安全系列(二):如何防止CSRF攻击?03 AJAX请求真...

  • HTML的全面review

    Date:2018-03-08 前端的三大主体 HTML ? 结构CSS ? 表现Javascript ...

  • 前端03

    1.伪类选择器 伪类专门用来表示元素的一种特殊的状态 2伪元素选择器 3选择器的优先级 内联样式ID选择器类和伪类...

  • 前端-03

    1:plate 元素选择器2:bento 元素选择器3:#fancy ID选择器4:plate apple 后代元...

  • 前端03

  • github 个人博客搭建笔记

    title: github 个人博客搭建笔记date: 2018-08-03 17:32:13tags: 前端 个...

  • do-while语句

    三个循环详细解读,你确定不看一下吗? 2017-03-26Web前端精髓 微信号:css-js 欢迎观临Web前端...

  • 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇...

网友评论

      本文标题:前端03

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