介绍
@hysryt/sukusho 是一款为前端开发者提供的轻量级的框架，用于实现自定义样式的选择器，以便更高效地构建网站页面。本文介绍了如何使用该 npm 包，并提供了一些示例代码供参考。
安装
在使用 @hysryt/sukusho 之前，我们需要先安装它。使用 npm 可以很方便地完成这个过程。在命令行中执行以下命令：
--- ------- --------------- ----------
上面的命令会将 @hysryt/sukusho 包安装到我们的本地项目目录中。
使用方式
@hysryt/sukusho 定义了一个全局对象 suku，我们在使用之前需要先引入它。在 HTML 中引入方式如下：
------- ------------------------------------------------------------
在 JS 中引入方式如下：
-- -------- ----- ---- - -------------------------- -- --- -- ------ ---- ---- -----------------
API
@hysryt/sukusho 提供了两种方式实现选择器，分别是 suku.b 版本和 suku.v 版本。
suku.b 版本
suku.b 版本能够满足基本的样式选择器需求，在页面渲染初始状态就可使用。
元素选择器
使用方式如下：
----- -------- - ------------------------
上面的代码将会选定 HTML 中具有 data-element 属性的所有元素。
子选择器
suku.b 版本同样支持子选择器，在选择器中使用 '>' 符号，如下：
----- ------------- - --------------- - --------
上面的代码将会选定具有类名为 parent 的元素下，类名为 child 的元素。
父选择器
suku.b 版本也支持父选择器，在选择器中使用 '<' 符号，如下：
----- -------------- - -------------- - ---------
上面的代码将会选定具有类名为 child 的元素上，类名为 parent 的元素。
suku.v 版本
suku.v 版本是升级版的选择器，增加了更多的灵活性和扩展性。
基于 HTML 规范的选择器
suku.v 版本支持 HTML 规范中定义的选择器，如下：
----- -------- - ----------- - ---------------
上面的代码将会选定具有标签名为 div 的元素下，标签名为 a 的第一个子元素。
class 选择器
同样，我们可以使用 . 符号实现类名选择器，如下：
----- -------- - ---------------------
上面的代码将会选定具有类名为 class-name 的元素。
我们还可以使用多个类名实现与选择器，如下：
----- -------- - ----------------------------------
上面的代码将会选定具有类名为 class-name1 和 class-name2 的元素。
id 选择器
使用 # 符号实现 id 选择器，如下：
----- ------- - ------------------
上面的代码将会选定具有 id 名称为 id-name 的元素。
属性选择器
使用属性选择器可以更灵活地实现元素选定。
基于属性名的选择器
使用 [属性名] 实现基于属性名的选择器，如下：
----- -------- - --------------------------
上面的代码将会选定具有 data-attribute 属性的所有元素。
基于属性名和属性值的选择器
使用 [属性名="属性值"] 实现基于属性名和属性值的选择器，如下：
----- -------- - ----------------------------------
上面的代码将会选定具有 data-attribute 属性且属性值为 value 的所有元素。
基于属性名和属性值前缀的选择器
使用 [属性名^="属性值"] 实现基于属性名和属性值前缀的选择器，如下：
----- -------- - -----------------------------------
上面的代码将会选定具有 data-attribute 属性且属性值以 value 开头的所有元素。
基于属性名和属性值后缀的选择器
使用 [属性名$="属性值"] 实现基于属性名和属性值后缀的选择器，如下：
----- -------- - -----------------------------------
上面的代码将会选定具有 data-attribute 属性且属性值以 value 结尾的所有元素。
基于属性名和属性值包含的选择器
使用 [属性名*="属性值"] 实现基于属性名和属性值包含的选择器，如下：
----- -------- - -----------------------------------
上面的代码将会选定具有 data-attribute 属性且属性值包含 value 的所有元素。
示例代码
接下来，我们将使用以上提到的选择器，实现一个能够选中页面中所有 a 标签的样式。
----- ----- - ----------- ------------------ -- - ---------------- - ----- --
上述代码中，我们使用了 suku.v 版本的选择器选择了所有 a 标签，并使用了 forEach 方法为它们添加了样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc1967216659e244198