如果ID为数字，则Bootstrap手风琴无法正常工作

Question

将Bootstrap升级到4.2.1版本后出现问题。在这个版本中，当我使用id="#12"在accordion它不工作。在以前的版本中，它可以与配合使用id="#12"。有任何想法吗？

  <div id="accordion">
    <div class="card">
  <div class="card-header" id="headingOne">
     <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#12"
           aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
        </button>
     </h5>
  </div>
  <div id="12" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
        dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
        synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
     </div>
  </div>

Answer 1

虽然在 HTML 5 中，以数字开头的 id 是有效的，但 CSS 不允许前导数字。

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 ( _); 它们不能以一个数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？” 可以写成“B\&W\?” 或“B\26 W\3F”。

在内部，Bootstrap 4 正在使用

getSelectorFromElement(element) {
    let selector = element.getAttribute('data-target')

    if (!selector || selector === '#') {
      const hrefAttr = element.getAttribute('href')
      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  }

查找您的元素。querySelector需要一个有效的 CSS 选择器

一个 DOMString 包含一个或多个要匹配的选择器。此字符串必须是有效的 CSS 选择器字符串；如果不是，则抛出 SYNTAX_ERR 异常。

我建议只使用有效的 CSS 标识符。您也可以使用一些技巧来逃避，但除非万不得已，请使用不同的选择器