Question

我在为网页中的元素的CSS路径自动生成逻辑时遇到问题。

用例：当用户点击网页上的任何元素时，使用CSS选择器概念（如id-name，class-name，tag-name和nth-child）自动生成CSS选择器。

例如：假设我点击了电子商务产品说明页面上的价格元素，我会得到类似body > ul:nth-child(27) > li:nth-child(1)的内容。这里最大的BANE是nth-child(1)，因为对于这个页面，价格是第一个孩子，但对于其他页面，它可能是第4或第5或第23个孩子。而且，更大的问题是价格元素的HTML是

<html>
    ....
    <body>
          <div>ABC</div>
          <div>DEF
               <span>GHI</span>
               <ul>
                   <li> PRICE: $32.23 </div>
                   <li> WEIGHT: 100 lbs </div>  
               </ul>
          </div>
   </body>
</html>

没有任何classname或id-name。我当前的选择器生成逻辑会生成很多选择器组合，但会选择最独特的选择器。

请帮助我！

Answer 1

 <span class='product'>Cheese</span>
           <ul class='product-details' >
               <li class='price' id='Cheese-price'> PRICE: $32.23 </li>
               <li class='weight' id='Cheese-weight'> WEIGHT: 100 lbs </li>  
           </ul>
 <span class='product'>Apple</span>
           <ul class='product-details' >
               <li class='price' id='Apple-price'> PRICE: $2.23 </li>
               <li class='weight' id='Apple-weight'> WEIGHT: 1 lbs </li>  
           </ul>

我的概念是您添加类以根据产品名称和-price或-weight后缀（例如Cheese-price）进行分类和制作唯一ID。然后，您可以使用一些jquery函数来按类或按属性名称的末尾标识元素：-price

因为这个页面的价格是第一个孩子，但是对于其他页面，它可能是第4个孩子，第5个孩子或第23个孩子。

如果我点击此PRICE：$ 23.32，则JS函数将读取li元素内的textContent

点击电子商务产品说明页面上的价格元素

...但这里没有涉及数据库。只是网页及其DOM

您是在服务器端生成css选择器还是仅在用户单击时生成js function？如果是晚些时候，那么你就是在错误的领域。

更新

由于您尝试在客户端添加css选择器（在接收HTML页面之后），我建议您抓取漏洞页面，将其保存在本地并使用regex基于单词{{1}进行处理}和PRICE。例如：WEIGHT

请参阅working demo。

替代自动css选择器生成中的nth-child方法

1 个答案:

更新