如何在URL包含特定字符串（如type=0）时修改CSS？

方法1：使用CSS @document 正则匹配（部分浏览器支持） #

@document 支持正则表达式匹配URL，可以精准命中包含type=0的页面：

@document regexp("https://example.com/search.php\\?.*type=0.*") {
  /* 写入需要修改的样式，示例： */
  .target-element {
    background-color: #ff0000;
    font-size: 16px;
  }
}

注意点：

• 正则中的?需要转义为\\?，符合CSS正则语法要求
• 该特性目前仅在Firefox、Chrome、Edge等主流现代浏览器支持，旧版本浏览器可能存在兼容性问题

方法2：JavaScript动态注入样式（兼容性最优） #

如果需要全浏览器兼容，可通过JS检测当前URL，再动态添加样式：

// 检查当前URL是否包含type=0
if (window.location.href.includes('type=0')) {
  // 方式1：给目标元素添加自定义样式类
  document.querySelector('.target-element').classList.add('type-0-custom');
  
  // 方式2：直接创建样式标签注入CSS
  const styleTag = document.createElement('style');
  styleTag.textContent = `
    .target-element {
      background-color: #ff0000;
      font-size: 16px;
    }
  `;
  document.head.appendChild(styleTag);
}

如果用方式1，对应CSS可提前写好：

.type-0-custom {
  background-color: #ff0000;
  font-size: 16px;
}

这种方式几乎兼容所有现代浏览器，不受CSS特性支持限制。

方法3：借助用户样式/脚本工具（自定义场景推荐） #

如果你用Stylus、Tampermonkey这类工具，它们内置了更灵活的URL匹配规则：

• Stylus中直接写匹配规则：

@-moz-document regexp("https://example.com/search.php\\?.*type=0.*") {
  /* 样式内容 */
}

• Tampermonkey脚本的元数据里指定匹配：

// @match        https://example.com/search.php?*type=0*

这类工具会自动处理兼容性，适合个人自定义浏览器样式的场景。

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