我正在使用插件：“Wordpress Contact Form 7”。
我想覆盖插件与我自己的CSS一起使用的CSS。 我希望这样做，即使我更新这个插件，或改变我的主题，我的更改仍将保留。
最好的方法是什么？ 到目前为止，我一直在尝试编辑我的主题的style.css。但这产生了不充分的结果。由于style.css可能在插件的css之前加载，因此插件可能会覆盖css。仅当我为插件css中未定义的内容指定属性时，它才有效。
答案 0 :(得分：2)
如果仅需进行一些修改，到目前为止，覆盖插件样式表的最简单方法是在<!doctype html>
<html>
<head>
<title>Line Styles</title>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var baseline = 1;
var config = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'TestData',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [
0 - baseline,
1.8 - baseline,
2.1 - baseline,
-0.2 - baseline,
1.3 - baseline,
-0.5 - baseline,
-0.23 - baseline,
0 - baseline
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart',
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// Use the footer callback to display the sum of the items showing in the tooltip
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel + baseline;
return label;
},
},
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return value + baseline;
}
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
文件中要定位的元素前面添加body。添加style.css可以为选择器添加CSS特定性，从而使其可以覆盖原始样式。就像雷齐斯所说。
body答案 1 :(得分：1)
你试过这个吗？
body {
background-color: red !important;
}
编辑：对不起 - 已修复