如何仅在/blog/*路径页面为指定div应用对应CSS样式

方案1：利用页面根节点路径类（优先推荐） #

大部分CMS（你当前使用的Drupal默认支持）、前端框架都会自动给body或html根标签添加路径对应的类名，路径为/blog/xxx的页面，body会自动带有path-blog类，你只需要给原有CSS选择器加个前缀即可：

/* 加路径类前缀，仅匹配/blog/* 页面下的目标div */
.path-blog .field.field--name-name.field--type-string.field--label-hidden.field__item.quickedit-field {
    position: relative;
    z-index: 200;
    display: block;
    float: left;
    max-width: 200px;
    background: #a02853;
    font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 100%;
    padding: 5px;
    font-size: small;
}

方案2：JS动态判断路径（兼容通用方案） #

如果你的项目没有自动生成路径类，可以用JS判断当前路径，动态给根节点加类后再匹配样式：

• 首先在全局公共JS中添加如下代码：

// 判断当前页面是否属于/blog路径下的页面
if (window.location.pathname.startsWith('/blog/')) {
  // 给body添加路径标记类
  document.body.classList.add('path-blog');
}

• 再使用方案1中的CSS代码即可生效。

注意事项 #

• 你提供的原有CSS代码末尾缺少闭合的}，记得补上避免样式失效
• 如果是服务端渲染或者静态站点项目，也可以直接在服务端模板中判断路径，给body加path-blog类，比JS方案更稳定，不会出现页面加载后样式才生效的闪烁问题。

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