css - 在纯 CSS 中设置父元素的属性

Question

使用 jQuery 数据表编辑器，在编辑一行时会显示一个 Bootstrap 模式(没有特定的类名，直接附加到页面的主体)。

我想自定义此模态框的大小，并执行了以下操作:

$(".counting_template").parents('.modal-dialog').attr('style', 'width: 90%!important');

".counting_template" 是我知道将出现在编辑器中的字段类。

它工作正常，但我想通过使用纯 CSS 来改进它。

我本可以这样做:

body>.modal_dialog{

   width:90%!important

 }

但我的经验是它会干扰其他现有模态。

有办法吗？

Answer 1

虽然您不能在 CSS 中基于子项定位父项，但您可以通过仅在 js 中添加一个 CSS 类并将其余部分留给 CSS 来稍微改进它

$(".counting_template").parents('.modal-dialog').addClass('edit-modal')

CSS

.edit-modal {
   // whatever you want
}

这为您提供了更清晰的 js 代码，并增加了更多灵 active ，以便在需要时添加更多规则。由于此类可能是唯一的(使其唯一)，您可以通过类名本身来定位它