语义上focus是取得焦点，针对是控件类元素，因为 focus 伪类主要用于指示用户当前正在操作的元素。只有控件类元素才需要用户进行操作，所以只有它们才需要获得焦点。
其他元素无法获得焦点？其他元素，例如文本、图片、视频等，通常不需要用户进行操作，所以它们无法获得焦点。
但 active 可以应用于任何元素，包括非控件类元素。为什么非控件类元素也可以使用 active？
因为 active 伪类主要用于响应用户的交互行为，例如点击或按住。而任何元素都可以被点击或按住，所以任何元素都可以使用 active 伪类。
举个例子：你可以将 active 应用于一个图片元素，当用户点击并按住图片时，改变图片的透明度或添加阴影。
你也可以将 active 应用于一个文本元素，当用户点击并按住文本时，改变文本的颜色或添加下划线。
总结：focus的目的是取得对元素的操作（编辑或选择等），active是取得响应。
结构伪类： 描述元素在文档结构中的位置，例如 :first-child, :last-child, :nth-child(n), :not(), 等等。
状态伪类： 描述元素当前的状态，例如 :hover, :focus, :active, :checked, 等等。
动态伪类： 某些状态会动态变化，无法用简单的状态伪类描述，例如 :target, :root, :empty, 等等。
注意：伪类与伪类选择器是有区别的。
一、类与伪类，类是真正的类，一般用class="XX"等来表示。而伪类即不是真正的类，它没有class，却能通过元素特殊的状态来进行“分类”，似乎有了类名一样进行区分，也被称为“伪类”，即伪军一样。
二、伪类与伪类选择器。伪类是 概念，用来描述元素的状态，而伪类选择器是 选择器，用来选择符合特定状态的元素。
伪类选择器用来选择伪类，而伪类则用来描述元素的状态。
- div > p:not(first-child) {
- color: red;
- }
与
- div > p:not(:first-child) {
- color: red;
- }
有什么区别？
没有：时是没有限制的，是所有的第一个子元素，然后再与前面的div>p求交集。(实际重复算了一部分)
而有:的，则是在经前面div>p限制后剩下元素中的第一个子元素。
虽然两个效果相同，但加了:的性能效率更高。
结论：这两个规则可能看起来有相同的效果，但第二个带冒号的规则不仅是有效的CSS，而且在性能方面更高效。
特别注意：:first-child是伪类，即前面指定元素中的第一个（否定）
first-child是选择器，即不管前面指定的元素，反正是第一个儿子元素即可。
所以加不加冒号，除了语法与语义上的不同之外，可能有不同的结果，不能直接认定为相同的效果更优的效率。加不加冒号完全取决于你想要实现的效果。没有一个固定的规则说哪种写法更好，关键在于你要实现的目标。
例如:
- <head>
- <meta charset="UTF-8" />
- <title>否定伪类title>
- <style>
- div > p:not(:last-of-type) {
- color: red;
- }
- style>
- head>
- <body>
- <div>
- <span>测试1span>
- <p>张三：98分p>
- <p>李四：88分p>
- <p>王五：78分p>
- <p>赵六：68分p>
- <p>孙七：58分p>
- <p>老八：48分p>
- <br />
- div>
- body>
上面的使用了冒号，用的是伪类，是前面限制中的同类（p元素）的最后一个元素（
老八：48分
）的否定。 首先说明定位name锚点时，只是能另一处有name="six"的a标签，其它标签不起作用。id不受此限。
在HTML中使用a标签和name属性进行锚点定位以及使用id属性进行定位的区别,主要是由于浏览器渲染引擎对它们的处理方式不同导致的。
当使用a name="anchor"时,浏览器会将该锚点渲染为一个行框盒子,其高度由内容决定。例如,如果锚点位于一个h1标题之后,则它的顶部将与h1的下边缘对齐。这就导致了你提到的像素差异。
而当使用id属性时,浏览器会将锚点渲染为一个没有高度和内容的精确点。因此,当使用id定位时,浏览器总是会精确地滚动到该点的位置。
总的来说,使用id是更推荐的定位方式,因为它能够提供更精确的定位。而name属性主要是为了向后兼容旧版本的HTML,在现代Web开发中已经很少使用了。
所以,为了获得更好的定位体验,建议你使用id属性来设置锚点,并使用scrollIntoView之类的JavaScript方法进行平滑滚动。
具体来说: 会渲染成一个行内元素,浏览器会为它创建一个行框盒子,锚点定位到的是这个行框盒子的上边缘。 对的，这也是为什么不按照其它编程语言，前面对象后面成员（属性或方法）的原因。 .和:在CSS选择器语法中具有不同的含义和作用: 如果没有:前缀,则不会在已匹配元素集合中进行进一步筛选,而是从整个HTML文档中选择所有匹配的元素。 CSS 选择器的解析顺序是从左到右,也就是从外到内。例子 div p>span:not(:first-child): 补充说明，冒号(:)后面紧跟的伪类,如 :first-child、:not() 等,是作用于找到的元素上。而双冒号(::)后面的伪元素,如 ::before、::after 等,是作用于找到元素的特定部分(如它的开头或结尾)。 重要提醒： 虽然 "font" 在字面上似乎更直接，但在 CSS 中使用 "font-family" 是因为 CSS 规范的设计考量，主要原因是： font-family: 控制使用的字体系列（比如：Arial, Helvetica, sans-serif）。 兼容性: 使用 "font-family" 能够确保 CSS 代码在不同的浏览器中保持一致的行为。 总结：CSS 使用 "font-family" 而不是 "font" 是为了：
如果是一个空的,则锚点会精确定位到这个span所在的位置
29、css中.与:是有区别的，也就是类选择器与伪类的区别？
为什么.只能特别指定只能是类选择器？(类名是属性之一，还有其实属性，为什么不一起用在这其中？）
这主要是为了与CSS语法中其他用途区分开来。除了类选择器,CSS中还有其他几种选择器类型:
元素选择器,如div、p等。
ID选择器,使用#,如#my-id。
属性选择器,使用[],如[type="text"]。
伪元素选择器,使用::前缀,如::before。
正是为了与这些现有选择器语法区分开来,类选择器才使用了.前缀的语法，而不会与其他选择器类型混淆。
.前缀用于类选择器,例如.my-class。它确实特指class,表示选择所有具有该类名的元素。
:前缀用于伪类选择器,例如:hover。伪类选择器是在前面已经匹配到的元素集合中进一步筛选处于特定状态的元素。
30、一个选择器它是如何来解析的呢？比如div p>span:not(:first-child)
1)首先,它从左边开始,选择所有 div 元素中的 p 元素,结果记为 A。
2)然后,在 A 的基础上,选择其中直接子元素 span,结果记为 B。
3)接下来,对 B 应用 :not(:first-child) 这个否定伪类选择器。
4)首先,对 B 中的每个 span 元素计算 :first-child 伪类,得到一个新的结果集 C。
5)然后,:not(C) 会从 B 中排除掉 C 中的元素,剩余的就是最终选择的元素了。
所以CSS 选择器解析的顺序是从左到右,越往右选择范围越小,伪类等修饰符是最后应用的。
如果结果C中的元素集合与B完全不重叠,也就是说C中的所有元素都不在B中。那么对B应用:not(C)就等同于不做任何操作,最终结果仍然是B。
如果结果C有部分元素在B中,那么:not(C)就会从B中排除C中存在的那部分元素,剩下的就是最终结果。
也就是说,:not()伪类只会从原始元素集合中排除掉那些与其参数匹配的元素,而不会添加任何新元素。如果它的参数选择器没有匹配到任何元素,那么原始集合就不会有任何变化。
31、为什么css中的字体不用font，而用font-family?
区分字体的属性: CSS 规范将 "font" 属性拆分为多个子属性，分别控制字体的不同方面，例如：
font-size: 控制字体的尺寸。
font-weight: 控制字体的粗细（比如：normal, bold）。
font-style: 控制字体的样式（比如：normal, italic）。
font-variant: 控制字体的变体（比如：small-caps）。
更细粒度的控制: 使用多个子属性能够更精确地控制字体的各个方面，方便开发者根据需要进行调整。
区分字体的各个属性，提供更精确的控制。
保证代码在不同浏览器中的兼容性。