javascript - nth-child 选择器不适用于手机上属于 JavaScript 的 Tingle.js 类
问题描述
- 该类
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;
}
这意味着第一个窗口关闭按钮是橙色的,第二个是紫色的。
使用单击/启用/打开模式,编译后的 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 进行测试,并将预览窗口的大小调整为小于 530px: https ://jsfiddle.net/gusbemacbe/k8v74gwb/1/
解决方案
:nth-child
,顾名思义,是其父母的第 N 个孩子。当您打开模态框时,关闭按钮始终是模态框的第一个子项。使用类似的东西.tingle-modal:nth-child(1) .tingle-modal__close
会更合适,如果模态总是按正确的顺序排列(似乎不是这样,它们是相反的)
但是,如果您想向模态添加类,Tingle.js库允许您提供一个选项。cssClass
你可以用它来做你想做的事:
https://jsfiddle.net/d60f4jz8/2/
JS
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;
}
推荐阅读
- html - 如何在 Angular 中定位材质菜单?
- django - Django + Gunicorn + Nginx。404
- angular - 如何在Angular中将按钮添加到循环的最后一个组件
- python - Spyder 4.1.5 中不支持没有形状的对象数组问题
- javascript - 编写一个基于 JS 中的输入数组创建动态输出的函数
- regex - 在 Bigquery 中使用正则表达式获取地址的街道名称和编号
- python - 是否可以使用 Selenium 与通过请求访问的网页进行交互?
- r - 带有 scale_y_continuous() 的多面直方图中的百分比
- python - 加权稀疏分类交叉熵
- node.js - 客户端(React)如何在 NodeJS 中下载 excel 文件?