如何在CSS规则中选择具有Windows格式路径的属性？

Question

我正在寻找在VS Code中设置某些元素样式的方法（但实际上可以是任何Web应用程序，基于Electron / NWjs的应用程序，基于Neutralino的应用程序等，具有Web视图并且可以枚举文件系统的任何元素）包含其绝对路径但Windows格式化的属性。示例：

<li data-path="C:\Windows\System32\etc">
  <a href="#">/etc</a>
</li>

as

li[data-path="C\:\\Windows\\System32\\etc"]

[在JavaScript中，我尝试使用Element.querySelector和CSS.escape来选择它，但是尝试使用整个路径失败了，而我本质上不得不通过在反斜杠上分割并做一个超级特定的选择器来以编程方式生成可用的规则，例如：

li[data-path^="C\:"]
  [data-path*="Windows"]
  [data-path*="System32"]
  [data-path*="etc"]

不仅看起来很糟糕，而且还很容易匹配错误的项目：

<li data-path="C:\Windows\System32\Drivers\etc\some-extra-folder\some-folder-with-the-word-etc\etc">
  <a href="#">/etc</a>
</li>

是否有一些工作方法可以为这样的字符串生成有效的CSS属性选择器？

[如果可能，我宁愿避免使用jQuery之类的第三方库来最大程度地减少依赖关系，但是如果像Sizzle.js或其他CSS querySelector之类的实现是获得有效的属性选择器功能的绝对唯一方法，我会如果绝对必要，请使用。

[目前，我正在使用document.querySelectorAll('li[data-path]')并遍历和原始比较字符串值，而我仍在寻找实际上适用于Windows样式路径的CSS属性选择器。

编辑：在其资源管理器视图中添加VS Code实际为文件生成的HTML

<div class="monaco-list-row focused selected" role="treeitem" data-index="16" data-last-element="false" aria-setsize="8" aria-posinset="5" id="list_id_4_16" aria-label="app.js" aria-level="3" draggable="true" style="top: 352px; height: 22px; line-height: 22px;" aria-selected="true">
  <div class="monaco-tl-row">
    <div class="monaco-tl-indent" style="width: 40px;">
      <div class="indent-guide" style="width: 16px"></div>
      <div class="indent-guide active" style="width: 16px"></div>
    </div>
    <div class="monaco-tl-twistie" style="padding-left: 40px;"></div>
    <div class="monaco-tl-contents">
      <div class="monaco-icon-label file-icon app.js-name-file-icon js-ext-file-icon ext-file-icon javascript-lang-file-icon explorer-item" title="C:\Users\liqui\Documents\dev\neu-lx-dash\app\assets\app.js" style="display: flex;">
        <div class="monaco-icon-label-container">
          <span class="monaco-icon-name-container">
            <a class="label-name">
              <span class="monaco-highlighted-label" title="C:\Users\liqui\Documents\dev\neu-lx-dash\app\assets\app.js">
                <span>app.js</span>
              </span>
            </a>
          </span>
          <span class="monaco-icon-description-container"></span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是正则表达式的服务。不幸的是，AFAIK没有CSS的正则表达式选择器之类的东西。但是，如果您不是直接在CSS中进行操作，而是可以运行一些js，则可以简化很多事情，因为您可以使用正则表达式过滤元素。这是一个例子：

var lis = document.querySelectorAll('li[data-path]');

var windowsPathRegEx = /[A-Z]\:\\.*/

var winLis = [...lis].filter(
        li=>li.dataset.path.match(windowsPathRegEx)
    );

console.log(winLis);

<li id='a' data-path="C:\Windows\System32\etc">
  <a href="#">li with windows path</a>
</li>
<li id='b' no-data>
  <a href="#">li without path</a>
</li>
<li id='c' data-path="C:\Program Files\whatever">
  <a href="#">another li with windows path</a>
</li>
<li id='d' data-path="/usr/local/share">
  <a href="#">li with linux path</a>
</li>

只要开发出满足您需求的正则表达式，就可以开始使用。

我不使用VSCode，但我想如果它是可样式化的，应该进行某种js初始化，您可以在其中放置此代码。