CSS选择器批量设属性及非Bootstrap Modal嵌套评论传值问题

让我分别帮你解决这两个前端问题：

你可以借助CSS的:not()伪类，通过链式调用两个:not()来实现多标签排除。举个实际例子，如果你想给除了<p>和<div>之外的所有标签设置文字颜色为深蓝色，代码可以这么写：

:not(p):not(div) {
  color: #2c3e50;
}

补充几个关键点：

• 这种写法兼容性很好，IE9及以上的现代浏览器都支持。
• 如果要排除的是类或ID，直接把标签名换成对应的选择器即可，比如排除.highlight类和#nav元素：

  :not(.highlight):not(#nav) {
    padding: 8px;
  }
  

• 还可以组合标签和类的排除逻辑，比如:not(h1):not(.special-text)，灵活性很高。

首先咱们先排查可能的问题：你大概率是事件绑定时机不对、元素选择器写错，或者没正确读取data-parent属性。我给你一套可直接复用的实现方案，你可以对照调整自己的代码：

第一步：HTML结构参考 #

假设你的按钮和Modal结构如下（可根据实际情况修改类名/ID）：

<!-- 打开Modal的按钮，带data-parent属性 -->
<button class="reply-btn" data-parent="comment-456">回复这条评论</button>

<!-- 自定义Modal（初始隐藏） -->
<div class="custom-modal" id="reply-modal" style="display: none;">
  <div class="modal-inner">
    <input type="hidden" id="parent-comment-id" value="">
    <textarea placeholder="写下你的回复..."></textarea>
    <button class="close-modal">关闭</button>
  </div>
</div>

第二步：JavaScript核心逻辑 #

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有回复按钮
  const replyButtons = document.querySelectorAll('.reply-btn');
  // 获取Modal里的目标输入框
  const parentInput = document.getElementById('parent-comment-id');
  // 获取Modal元素
  const modal = document.getElementById('reply-modal');

  // 给每个按钮绑定点击事件
  replyButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      // 读取当前按钮的data-parent值（两种写法都可行）
      const parentId = this.dataset.parent;
      // 或者 const parentId = this.getAttribute('data-parent');
      
      // 将值设置到输入框
      parentInput.value = parentId;
      // 显示Modal
      modal.style.display = 'block';
    });
  });

  // 关闭Modal的逻辑
  document.querySelector('.close-modal').addEventListener('click', function() {
    modal.style.display = 'none';
  });
});

常见问题排查： #

1. 动态生成的元素：如果你的按钮或Modal是后续动态添加到DOM的，要改用事件委托绑定点击事件，比如把事件绑定到父容器上：

   document.body.addEventListener('click', function(e) {
     if (e.target.classList.contains('reply-btn')) {
       // 这里执行设置输入框和显示Modal的逻辑
     }
   });
   

2. 选择器错误：检查你的类名、ID是否和HTML里的完全一致，别出现拼写错误。
3. Modal显示逻辑：如果你的Modal用了opacity或visibility来控制显示，记得同步调整对应的CSS属性，而不是只改display。

这样调整后应该就能正常传递值了，你可以根据自己的代码细节做适配。

内容的提问来源于stack exchange，提问作者javad