JavaScript Selector Library Supports CSS4!-优快云博客

本文深入探讨了CSS4新特性的应用，通过JavaScript选择器库Sel展示了如何利用这些特性进行元素选择。包括主题覆盖、ID引用、不区分大小写的属性匹配、列选择器等。同时讨论了在jQuery等现有库中实现CSS4支持的挑战及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

I was reading DailyJS and ran across this great JavaScript selector library called Sel.

It can select elements using the very brand new CSS4 features. The following are some examples.

/* subject overriding, was '$div .box' in a previous CSS4 draft,
   returns 'div' rather than '.box' */ div! .box
  /* id references, 'input' who's ID matches 'label's 'for' attribute */ label /for/ input
  /* case insensitive attribute matching */ [attr = "val" i]   /* :nth-match and :nth-last-match to match against sub-selectors */ div:nth-match(3 of .box)   /* links who's target absolute URI matches the current document's URI,
   arguments specify the degree of locality */ a:local-link(0)   /* :column */ td:column(col.profit)   /* :nth-column and :nth-last-column */ td:nth-column(even)

I've been hopeful that a selector engine would take on the challenge of CSS4 support. From what I understand about jQuery, CSS4 support would require a lot of rewriting Sizzle since it is so highly dependent on querySelectorAll(). I know that NWMatcher is a lot more robust in it's pre- and post-processing of selectors even when the browser supports querySelectorAll(). In other words, I'm thinking a selector engine needs to know when the browser supports CSS4 and use querySelectorAll() if possible even when CSS4 is not supported.

转载于:https://my.oschina.net/chenzhiqiang/blog/129782