为什么“#.id”在CSS/jQuery中是一个坏的选择器,但它在HTML锚中工作?

前端之家收集整理的这篇文章主要介绍了为什么“#.id”在CSS/jQuery中是一个坏的选择器,但它在HTML锚中工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用JSDoc。它生成一个周期为的ids
  1. <a id=".someMethodName"></a>

如果页面的另一部分

  1. <a href="#.someMethodName"></a>

这完美的。单击第二个锚点滚动到第一个。

但是,document.querySelector和jQuery都不会找到锚点。

为什么浏览器本身接受这个锚点,但jQuery和querySelector不?

  1. test("document.querySelector('#.someMethodName')",function() {
  2. document.querySelector('#.someMethodName');
  3. });
  4. test("$('#.someMethodName')",function() {
  5. $('#.someMethodName');
  6. });
  7.  
  8. function test(msg,fn) {
  9. try {
  10. var result = fn();
  11. log(msg,result);
  12. } catch(e) {
  13. log(msg,e);
  14. }
  15. }
  16.  
  17. function log() {
  18. var pre = document.createElement("pre");
  19. pre.appendChild(document.createTextNode(Array.prototype.join.call(arguments," ")));
  20. document.body.appendChild(pre);
  21. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <a href="#.someMethodName">click here to go to anchor and see errors</a>
  3. <pre>
  4. put
  5. some
  6. text
  7. here
  8. so
  9. the
  10. page
  11. is
  12. long
  13. enough
  14. that
  15. when
  16. we
  17. click
  18. the
  19. anchor
  20. the
  21. browser
  22. has
  23. as
  24. a
  25. place
  26. to
  27. scroll
  28. that
  29. is
  30. off
  31. screen
  32. otherwise
  33. we'd
  34. have
  35. no
  36. way
  37. to
  38. see
  39. if
  40. it
  41. worked
  42. or
  43. not
  44. </pre>
  45. <a id=".someMethodName">we should scroll to here</a>
  46. <p>did we make it?</p>
  47. <hr/>

解决方法

HTML5允许在ID属性值中有一个句点,而浏览器已经处理了这个没有任何问题几十年(这就是为什么HTML 4中的限制 – 本身不是由HTML定义,而是由SGML定义,在HTML5中放宽,现在免于SGML的遗产包装)。所以问题不在于属性值。

RFC 3986定义的片段标识符的语法是:

06000

其中pchar的字符集包括句点。所以.someMethodName是一个有效的片段标识符,这就是为什么< a href =“#。someMethodName”>作品。

但#.someMethodName不是有效的选择器,原因有两个:

> ID选择器由#后跟一个ident和an ident in CSS cannot contain a period组成。
>因此,周期保留用于类选择器(类似地,由一个周期后跟一个ident)。

简而言之,解析器期待一个CSS ident后的#,但没有找到一个,因为。直接跟随它,使选择器无效。这是令人惊讶的,因为ID选择器的符号实际上是基于片段标识符的URI表示法,这是因为它们都以#符号开始,以及它们都用于引用由该标识符在文档中唯一标识的元素。期望在URI片段中工作的任何东西也可以在ID选择器中工作并不是不合理的 – 并且在大多数情况下它是真的。但是因为CSS有自己的语法,它不一定与URI语法相关(因为它们是两个完全不相关的标准1),你会得到像这样的边缘情况。

由于句点是片段标识符的一部分,因此需要使用反斜杠将其转义,以便在ID选择器中使用它:

  1. #\.someMethodName

不要忘记,你需要在JavaScript字符串中转义反斜杠本身(例如,用于document.querySelector()和jQuery):

  1. document.querySelector('#\\.someMethodName')
  2. $('#\\.someMethodName')

1几年前,一个名为使用CSS选择器作为片段标识符的提议形成了一个W3C Community Group(其中我是一个成员),你可以想象,一个有趣的方式结合了这两种技术。这从来没有起飞,然而,唯一已知的实现是一些浏览器扩展,甚至可能甚至不被维护。

猜你在找的CSS相关文章