重点知识-CSS3

1. CSS3中三种基本选择器以及它们具体的功能

三种基本选择器包括：ID选择器、类选择器、元素选择器

ID选择器用于选择具有指定id属性的元素

类选择器用于选择具有指定class类名的元素

元素选择器用于选择指定类型的元素

2. CSS3中三种基本选择器的优先级

ID选择器>类选择器>元素选择器

3. 盒子模型

盒子模型的结构：content（显示内容）、border（边框）、padding（内边距：内容与边框的距离）、margin（外间距：外边框与其他相邻元素的距离）

4. CSS3中一共有哪些元素显示方式？哪些元素显示方式具有盒子模型功能

元素显示方式有：none、block、inline-block、flex、inline-flex

具有盒子模型功能的显示方式有：block、inline-block、flex、inline-flex

5. CSS3高级选择器有哪些，它们具体的功能是什么

5.1 关系选择器：

这类选择器主要用于选择与自己存在关系的选择器

• 包含选择器：选择属于自己内部的指定选择器的元素
  • 例如p span：表示选择p标签内部的所有span标签
  • 例如p .txt：表示选择p标签内部的所有class类名为.txt的标签
• 子选择器：选择属于自己内部的指定选择器的元素且只能是内部一级的
  • 例如p > span：表示选择p标签内部一级的所有span标签
  • 例如p > .txt：表示选择p标签内部一级的所有class类名为.txt的标签
• 相邻选择器：选择同级紧靠自己后面的一个指定选择器的元素
  • 例如p + span：表示选择p标签同级且紧靠在后面的一个span
  • 例如p + .txt：表示选择p标签同级且紧靠在后面的一个class类名为.txt的标签
• 兄弟选择器：选择自己后面同级指定选择器的所有元素
  • 例如p ~ span：表示选择p标签后面同级的所有span标签
  • 例如p ~ .txt：表示选择p标签后面同级所有class类名为.txt的标签

5.2 属性选择器：

这类选择器主要通过元素上的属性进行二次筛选

• E[attr] ：选择指定选择器的且具有某个属性的元素
  • 例如a[hrer]：表示选择所有具有href属性的a标签
  • 例如.ipt[name]：表示选择所有具有name属性的class类名为.ipt的元素
• E[attr=val]：选择指定选择器且具有某个属性且该属性的值为指定值的元素
  • 例如a[hrer="http"]：表示选择所有具有href属性且该属性的值为http的a标签
  • 例如.ipt[name=“account”]：表示选择所有具有name属性且该属性的值为account的class类名为.ipt的元素
• E[attr*=val]：选择指定选择器且具有某个属性且该属性的包含指定值的元素
  • 例如a[hrer*="http"]：表示选择所有具有href属性且该属性的值包含http的a标签
  • 例如.ipt[name*="account"]：表示选择所有具有name属性且该属性的值包含account的class类名为.ipt的元素
• E[attr^=val]：选择指定选择器且具有某个属性且该属性的以指定值开头的元素
  • 例如a[hrer^="http"]：表示选择所有具有href属性且该属性的值以http开头的a标签
  • 例如.ipt[name^=“account”]：表示选择所有具有name属性且该属性的值以account开头的class类名为.ipt的元素
• E[attr$=val]：选择指定选择器且具有某个属性且该属性的以指定值结尾的元素
  • 例如a[hrer$="http"]：表示选择所有具有href属性且该属性的值以http结尾的a标签
  • 例如.ipt[name$=“account”]：表示选择所有具有name属性且该属性的值以account结尾的class类名为.ipt的元素

5.3 伪类选择器：

这类选择器主要是在已选择好的情况下，进行再次筛选

• 选择器:first-child：选择指定选择器内部的第一个子元素（需要注意如果第一个子元素的选择器不匹配，那么无法选中）
  • 例如div p:first-child：表示选择所有div下面的第一个子元素且要求它是p标签
• 选择器:last-child：选择指定选择器内部的最后一个子元素
  • 例如div p:last-child：表示选择所有div下面的最后一个子元素且要求它是p标签
• 选择器:first-of-type：选择指定选择器内部的指定选择器的第一个子元素
  • 例如div p:first-of-type：表示选择所有div下面的第一个p标签
• 选择器:last-of-type：选择指定选择器内部的指定选择器的最后个子元素
  • 例如div p:last-of-type：表示选择所有div下面的最后一个p标签
• 选择器:nth-child(n)：选择指定选择器内部的指定位置的子元素，n的值从1开始
  • 例如div p:nth-child(2)：表示选择所有div下面的第二个子元素且要求它是p标签
  • 例如div p:nth-child(2n)：表示选择所有div下面的2的倍数位置且要求它是p标签
• 选择器:nth-of-type(n)：选择指定选择器内部的指定选择器指定位置的子元素，n的值从1开始
  • 例如div p:nth-of-type(2)：表示选择所有div下面的第二个p标签
  • 例如div p:nth-of-type(2n)：表示选择所有div下面的2的倍数位置的p标签

6. 选择器的权重是如何计算的

每个选择器都有固定的权重值，权重值具有级别，一共有4个级别，每个级别以逗号间隔，同级别的权重相加（但不会升级也不会降级）

7. 字体图标我们通常使用什么标签来实现

i标签