nth-child 选择器不适用于手机上属于 JavaScript 的 Tingle.js 类答案

【问题标题】：The nth-child selectors do not work with Tingle.js' classes that belong to JavaScript on mobile phonesnth-child 选择器不适用于手机上属于 JavaScript 的 Tingle.js 类
【发布时间】：2020-01-29 05:09:36
【问题描述】：

tingle-modal__close 类在 HTML 中不存在，因为它属于 JavaScript。当您单击超链接锚点以打开模式时，JavaScript 将添加此类。
tingle-modal__close 类确实存在于 Tinge CSS 文件中。但是 nth-child 选择器不适用于该类，因为该类属于 JavaScript。这是一个小例子：

  .tingle-modal__close:nth-child(1) 
  {
    background-color: var(--orange-600) !important;
  }

  .tingle-modal__close:nth-child(2) 
  {
    background-color: var(--purple-600) !important;
  }

这意味着第一个窗口关闭按钮是橙色的，第二个是紫色的。

使用 clicked/enabled/open modal，编译后的 HTML，带有 tingle-modal__close 由 JavaScript 添加：

<div class="tingle-modal tingle-modal--visible" style="">
  <button type="button" class="tingle-modal__close">
    <span class="tingle-modal__closeIcon">
      <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                <path d="M.3 9.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3L5 6.4l3.3 3.3c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4L6.4 5l3.3-3.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L5 3.6 1.7.3C1.3-.1.7-.1.3.3c-.4.4-.4 1 0 1.4L3.6 5 .3 8.3c-.4.4-.4 1 0 1.4z" fill="#000" fill-rule="nonzero"></path>
      </svg>
    </span>
    <span class="tingle-modal__closeLabel">Close</span>
  </button>
    <div class="tingle-modal-box">
        <div class="tingle-modal-box__content">
            <h1>Section 1</h1>
            <blockquote>“I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”</blockquote>
            <cite>Marilyn Monroe</cite>
        </div>
    </div>
</div>

您可以使用 JSFiddle 进行测试，并将预览窗口调整为小于 530 像素： https://jsfiddle.net/gusbemacbe/k8v74gwb/1/

【问题讨论】：

:nth-child，顾名思义，是其父级的第 N 个子级。当您打开模态框时，关闭按钮始终是模态框的第一个子项。如果模态始终处于正确的顺序（does not seem to be the case），则使用 .tingle-modal:nth-child(1) .tingle-modal__close 之类的东西会更合适
@blex，有解决办法吗？这似乎与 Robin 的 CSS 或 JavaScript 问题有关。

标签： javascript html css css-selectors

【解决方案1】：

:nth-child，顾名思义，是其父级的第 N 个子级。当您打开模态框时，关闭按钮始终是模态框的第一个子项。如果模态始终处于正确的顺序，则使用 .tingle-modal:nth-child(1) .tingle-modal__close 之类的东西会更合适 (does not seem to be the case, they're reversed)

但是Tingle.js 库允许您提供cssClass 选项，如果您想向模态添加类。你可以用它来做你想做的事：

https://jsfiddle.net/d60f4jz8/2/

var modalTinyNoFooter = new tingle.modal({
        cssClass: ['modal-1'],
        // ...
    });
// ...
var modalTinyNoFooter2 = new tingle.modal({
        cssClass: ['modal-2'],
        // ...
    });
// ...
var modalTinyNoFooter3 = new tingle.modal({
        cssClass: ['modal-3'],
        // ...
    });
// ...

CSS

.tingle-modal.modal-1 .tingle-modal__close {
  background-color: var(--orange-600) !important;
}

.tingle-modal.modal-2 .tingle-modal__close {
  background-color: var(--purple-600) !important;
}

【讨论】：