我正在编写一个WebExtension，它将一些HTML元素和CSS注入页面。我的问题是，控制元素不要从主网站样式表继承样式是很麻烦的，特别是适用于某些元素的规则，而不是类或ID。
例如，如果为该网站定义了一些.button {...}规则，我的 var mymap = L.map('mapid').setView([-1.3938636,36.7442377], 13);
var mapdata = $.ajax({
url: '/data.json',
dataType: 'text',
success: function(data) {
var geojson;
geojson = $.parseJSON(data);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'ACCESS_TOKEN'
}).addTo(mymap);
//add external geojson to map
var cordinates = L.geoJSON(geojson).addTo(mymap);
//Add popups to markers
function onEachFeature(feature,layer){
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
L.geoJSON(geojson, { onEachFeature: onEachFeature }).addTo(mymap);
//Adding custom markers to maps
var HospIcon = L.icon({
iconUrl: '<%= asset_path('red_MarkerH.png') %>',
iconSize: [20, 50], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to markers location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
var Custom_marker = L.geoJSON(geojson, {
pointToLayer : function(feature,latlng){
return L.marker(latlng, {icon: HospIcon}).addTo(mymap);
}
});
}
});
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
元素往往会从主网站继承样式（并且我没有明确覆盖它）。
我该如何防止这种情况？