HTML5 CSS3提高学习2

CSS3新特性

CSS3的现状：

• 新增CSS3特性有兼容性的问题，ie9+才支持

• 移动端支持优于PC端

• 不断改进中

• 应用相对广泛

• 现阶段主要学习：新增选择和盒子模型 以及其他特性

属性选择器

属性选择器可以根据元素特性属性的来选择元素，这个就可以不用借助与类或者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元素

注意：类选择器、属性选择器、伪类选择器权重都是10

例如 div(标签选择器是1) [class]是属性选择器是10

 

结构伪类选择器

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

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个

E:nth-child(n)

选择某个父元素的一个或者多个特定的子元素

• n可以是数字，关键字和公式

• n如果是数字，就是选择第n个子元素，里面数字从1开始...

• n可以是关键字：even偶数 odd奇数

• n可以是公式： 常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

  公式：

  2n 偶数 2n+1 奇数 5n 5 10 15.. n+5 从第5个开始(包含第五个)到最后 -n+5 前5个(包含第5个)…

nth-child和nth-of-type的区别

E:first-of-type 指定类型E的第一个 E:last-of-type, 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个

区别：

nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否匹配

nth-of -type对父元素里面指定元素进行排序选择，先去匹配E，然后再根据E找第n个孩子

小结

• 结构伪类选择器一般用于选择父级里面的第几个孩子

• nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配

• nth-of-type对父元素里面指定子元素进行排序选择。先去匹配，然后再根据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

是行内元素，改不了高度宽度，需改成行内块元素

伪元素选择器使用场景1：伪元素字体图标

 仿土豆网案例

伪元素选择器使用场景3：伪元素清除浮动

1. 额外标签法也称为隔墙发，是W3C推荐的做法 最后加上一个块级元素的空标签

2. 父级添加overflow属性

3. 父级添加after伪元素

4. 父级添加双伪元素

after伪元素

后面两种伪元素清除浮动算第一种额外标签法的一个升级和优化

注意：单冒号是为了照顾低版本浏览器

clearfix:after{

content: '';

display: block; 插入元素必须是块级元素

height: 0; 不要看见这个元素

clear: both; 核心代码清除浮动

visbility: hidden; 不要看见这个元素

}

双伪元素

clearfix:before,.clearfix:after {

content: '';

display: table; 转换为块级元素并且一行显示

}

.clearfix:after {

clear: both;

}