Drupal后台CSS覆盖失效：需添加何种代码实现样式生效？

嘿，我来帮你搞定这个CSS不生效的问题！你遇到的情况是典型的CSS优先级冲突——原有样式的选择器优先级比你写的更高，所以浏览器优先用了原来的居中样式，把你的自定义规则给忽略了。下面给你几个可行的解决方案：

1. 提升自定义选择器的特异性（推荐） #

CSS里选择器越具体，优先级越高。你可以把针对td的选择器写得更精准，比如结合它的父元素类名，让你的规则“权重”超过原有样式。

修改你的<style>代码：

<style type="text/css">
.maclasse div { 
  background: #ffffff; 
  overflow:auto; 
  width:auto; 
} 
/* 更具体的选择器，提升优先级 */
div.maclasse.maclasse2 table.maclasse2 tbody tr td { 
  text-align: left; 
}
</style>

原理是：原来的样式可能用了类似.admin-table tbody tr td这种更具体的选择器，你通过叠加更多父级类名，让自己的选择器特异性超过它，这样浏览器就会优先应用你的规则。

2. 使用!important强制覆盖（应急用） #

如果不想调整选择器，也可以在属性值后面加!important，强制浏览器优先应用这个样式。不过要注意，!important会打破正常的CSS优先级规则，后续维护可能会麻烦，所以尽量优先用第一种方法。

修改代码如下：

<style type="text/css">
.maclasse div { 
  background: #ffffff; 
  overflow:auto; 
  width:auto; 
} 
.maclasse2 tbody tr td { 
  text-align: left !important; 
}
</style>

3. Drupal更规范的做法（长期维护推荐） #

其实在Drupal里，直接在HTML里插<style>不是最规范的方式。如果你的场景允许，推荐用以下两种方法：

• 主题自定义CSS：把你的样式写到主题文件夹下的custom.css（或自定义命名的CSS文件）里，然后在主题的.info.yml文件里添加引入配置，这样样式会和主题一起加载，优先级更容易控制。
• CSS Injector模块：安装这个模块后，可以在后台直接添加自定义CSS代码，它会帮你把样式正确注入到页面中，比手动写<style>更可靠。

补充小技巧 #

你可以通过浏览器的开发者工具（F12）查看td元素的样式，看看原有样式的选择器是什么，这样就能针对性地调整自己的选择器，确保优先级超过它。比如在审查元素里，被划掉的样式就是被覆盖的，你可以对比两个选择器的特异性。

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