搜索引擎优化原理(核心原理最基本的，我们需要的朋友可以参考下)

　　搜索引擎优化原理(核心原理最基本的，我们需要的朋友可以参考下)

　　本文文章主要介绍使用CSS实现搜索引擎的原理分析。本文为您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考。

　　大家好，我是卡松。

　　在CSS中，我们通过选择器（selector）来选择样式片段：

　　 .title { color: red; }

　　总之，选择器标题对应样式颜色：红色；

　　换个角度，我们也可以说：关键词.title 对应的数据颜色：红色；

　　在我们的生活中，还有什么取决于这种对应关系？

　　一个明显的例子：搜索引擎。

　　

　　在搜索引擎中输入关键词，搜索引擎检索后会返回关键词的对应数据。

　　既然道理都一样，那能不能用纯CSS实现一个搜索引擎呢？

　　更何况还有很多人有机器（没有）智能（聊天），还有一些人真的有一个用CSS实现的搜索引擎[1]。

　　

　　在搜索引擎中输入员工姓名，会显示员工信息。

　　这篇文章讲述了他是如何实现的。

　　核心原则

　　在最基本的层面上，我们需要一个搜索框和一个容器来显示搜索结果。

　　注意oninput使用了一行JS代码，也是引擎中唯一的一行JS代码

　　我们要输入Tim，搜索结果Tim Carry就会显示在#result容器中。

　　可以通过属性选择器+伪元素来实现：

　　 input[value="tim" i] ~ #result:before { content: "Tim Carry"; }

　　属性选择器中的 i 代表忽略内容大小写。

　　这是这个搜索引擎的核心原理。理论上，只要选择器规则越多，搜索结果就会越丰富。

　　多个搜索结果

　　让我们继续扩大。假设有150名员工，为他们一一建立对应关系：

　　每个员工一个 div：

　　 […]

　　每个员工一个搜索结果：

　　 #result0:before { content: "Aurora Pleguezelo" } // […] #result15:before { content: "Alexandre Collin" } #result16:before { content: "Alexandre Meunier" } #result17:before { content: "Alexandre Stanislawski" } // […] #result150:before { content: "Zo Asmail" }

　　接下来，设置搜索规则，首先隐藏所有搜索结果：

　　 #results div { display: none }

　　然后，选择一个粒度并建立搜索规则。例如，我们选择“姓氏”作为粒度：

　　 input[value="alexandre" i] ~ #results #result15, input[value="alexandre" i] ~ #results #result16, input[value="alexandre" i] ~ #results #result17 { display: block }

　　当输入alexandre的姓氏时，会显示相应的结果：block：

　　 #result15:before { content: "Alexandre Collin" } #result16:before { content: "Alexandre Meunier" } #result17:before { content: "Alexandre Stanislawski" }

　　更进一步，名称可以拆分得更细，因此搜索的粒度可以更细：

　　

　　可以分别用一个字母、两个字母、三个字母……建立对应关系。

　　

　　搜索词突出显示

　　为了提升体验，我们还想“突出搜索词”。

　　比如输入cle后，在搜索结果名称中cle以粗体显示：

　　

　　分为2个步骤：

　　1.自定义字体

　　

　　在UTF-8的私有区域，为每个字母定义对应的加粗字体，例如：m对应这个字体中的\e64d。

　　2. 在搜索结果中用粗体替换常规字母

　　比如输入mar的搜索结果应该是：Marion Aguirre。

　　将结果中的Mar替换为\e64d\e661\e672，即自定义字体中Mar对应的粗体。

　　

　　总结

　　按照这个设定，这个搜索引擎唯一的限制就是作者的想象力。

　　比如使用flex布局的order属性，出价排名不是梦：

　　想了想，稍微怀疑一下：CSS文件会不会太大了？

　　哎，只能说越小，结构越小。

　　

　　虽然收录150名员工的CSS文件是8MB，但毕竟收获了幸福……

　　参考

　　CSS实现的搜索引擎：

　　以上就是一个使用CSS的搜索引擎原理分析的详细内容。更多详情请关注其他相关html中文网站文章！