HTML5 和 CSS3 的新特性

269 阅读2分钟
H5新增的语义化标签
  • <header>:头部标签
  • <nav>:导航标签
  • <article>:内容标签
  • <section>:定义文档某个区域
  • <aside>:侧边栏标签
  • <footer>:尾部标签

QQ截图20230119150559.png

CSS3的新特性

属性选择器 : 可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

选择符简介
E[att]选择具有att属性的E元素
E[att="val"]选择具有att属性且属性值等于val的E元素
E[att^="val"]匹配具有att属性且值以val开头的E元素
E[att$="val"]匹配具有att属性且值以val结尾的E元素
E[att*="val"]匹配具有att属性且值中含有val的E元素

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

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

总结:

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
  • 关于 nth-child(n), n 是从 0 开始计算的,
  • 如果是无序列表,用 nth-child 更多
  • 类选择器、属性选择器、伪类选择器,权重为 10。

伪元素选择器 : 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意:

  • before 和 after 创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
  • 语法: element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样,权重为 1