如何使用JavaScript为带有post-state类且包含Elementor字符串的元素应用CSS样式

嗨，我来帮你搞定这个问题～你的代码里有几个小问题导致它没正常工作，我一步步给你拆解并修正：

先说说你代码里的问题 #

• document.getElementsByClassName("post-state") 返回的是元素集合（不是单个元素），不能直接用.style修改，得遍历每个元素
• jQuery选择器写错了：应该是$('.post-state:contains("Elementor")')（要加类名的.，而且直接用这个选择器就能定位到目标元素，不用额外的if判断）
• 用if($('...'))永远会返回true，因为jQuery对象即使是空的，也是一个对象，布尔判断里会被视为真
• JS里直接给.style加!important是无效的，语法不对

方法1：纯JavaScript实现（不用jQuery） #

如果你不想依赖jQuery，用原生JS就能搞定：

// 获取所有带post-state类的元素
const postStateElements = document.querySelectorAll('.post-state');

// 遍历每个元素
postStateElements.forEach(element => {
  // 检查元素文本是否包含"Elementor"
  if (element.textContent.includes('Elementor')) {
    // 设置样式（行内样式优先级很高，一般不需要!important）
    element.style.color = 'red';
    element.style.fontWeight = 'bold';
    // 如果确实需要!important（比如被其他高优先级样式覆盖），可以这么写：
    // element.style.setProperty('color', 'red', 'important');
    // element.style.setProperty('font-weight', 'bold', 'important');
  }
});

方法2：jQuery实现（如果你页面已经引入了jQuery） #

如果你的页面已经加载了jQuery，那代码可以更简洁：

// 直接定位到所有带post-state类且包含"Elementor"文本的元素，然后设置样式
$('.post-state:contains("Elementor")').css({
  'color': 'red',
  'font-weight': 'bold'
});

// 如果需要加!important（特殊情况），可以这么写：
// $('.post-state:contains("Elementor")').each(function() {
//   $(this).css('color', 'red !important');
//   $(this).css('font-weight', 'bold !important');
// });

小提示 #

• 确保你的代码在DOM加载完成后执行，否则可能找不到元素。可以把代码放在DOMContentLoaded事件里：
  纯JS版：

  document.addEventListener('DOMContentLoaded', function() {
    // 上面的纯JS代码放在这里
  });
  

  jQuery版：

  $(document).ready(function() {
    // 上面的jQuery代码放在这里
  });
  

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