Html 用我的CSS选择器覆盖所有给定的CSS样式

我正在为任何CMS编写一个应用程序，我不知道周围的CSS或它的选择器，但希望我的应用程序看起来总是一样的

我的问题是，如果外部选择器选择我的一个元素，例如通过

button{height:100px；}

和我的选择器

button.class{width:100px；}

没有指定

height

属性，那么外部选择器会将此属性放到我的按钮上并更改其样式

这只是一个简单的例子，您可能会说，“也只需在选择器中指定

高度”

，我无法将每个可思考的属性都放入选择器中，并覆盖可能已设置的所有内容

请看这个提琴，了解一个简单的示例：，其中我不希望第一个选择器在我的蓝色元素上设置边框，但当然，它确实设置了边框

我尝试了

all:unset和<代码>全部：初始但它只是不起作用，而且在Internet Explorer中肯定不会起作用

我也知道有范围的CSS，但这也不太可靠

（进一步信息：这是一款angular 1.x应用程序，将主要注入WordPress CMS页面，我使用sass编译CSS）
请参阅此示例。不幸的是，第一个选择器在我的蓝色元素上设置了边框

在第二个框中定义边框的原因是因为它是一个
按钮
，您在该按钮中定义了边框。这就是CSS的工作原理。如果不想在第二个元素上使用边框，则需要定义
border:0按钮
，使用排除第二个框的内容，如
按钮：not（#id1）
 对我有效的解决方案是使用CSS属性
all
将值设置为
revert

.css-class {
    all: revert;
}

报告很好地解释了这一点：

revert CSS关键字回滚级联，以便属性采用当前样式源中没有样式时的值

对于firefox和chrome，请使用
unset
：

.css-class {
    all: unset;
}

有关使用“媒体查询黑客”检查当前浏览器以获取跨浏览器解决方案的信息，请参阅。此外，请参见此小提琴，其中蓝色框不继承height属性：

我希望这个解决方案也能在您的项目中起作用。
所以我设法使它起作用。谢谢你的回答

all:unset和revert对我不起作用，
all:initial
起作用

此外，我将为我的内部类提供非常具体的名称。类似于
class=myprojectclass
，以防止外部类选择器注入它们自己的属性

这也不应该在IE中工作

请看这张小提琴：
由于web当前存在，几乎不可能阻止CSS代码修改您的元素。实际上，您所说的是对元素进行沙箱化，以防止其他代码修改它们

您可以使用
iframe
来实现这一点，但这太可怕了，而且几乎可以肯定是太多的废话

另一方面，未来是光明的！有一个特性被称为shadowdom，它本质上允许您实现自己的元素，并从代码的其余部分对它们进行沙箱处理。这已经是
输入
和
视频
等元素在幕后的工作方式：现在我们开始做浏览器多年来一直在做的事情

您可以创建一个元素：我们将其称为
实心按钮

<solid-button></solid-button>

然后，我们使用一点Javascript创建阴影DOM，并将模板中的内容添加到其中：

customElements.define('solid-button', class extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    const template = document.querySelector('#solid-button-src');
    const clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
  }
});

现在，这在一些浏览器中可以正常工作，但还远远不足以让它为生产做好准备。用户可以将样式应用于
实体按钮
，但它们不会影响内部内容。如果您有最新的浏览器，您可以在下面看到它的效果

显然，这不是你现在的解决方案，但它可能是未来的解决方案


customElements.define（'solid-button'，类扩展HtmleElement{
构造函数（）{
超级（）；
const shadowRoot=this.attachShadow({
模式：“打开”
});
const template=document.querySelector（'template'）；
const clone=document.importNode（template.content，true）；
shadowRoot.appendChild（克隆）；
}
});
按钮{
高度：100px；
宽度：100px；
背景色：红色；
边框：实心1px黑色；
}
.1级{
高度：100px；
宽度：100px；
背景颜色：蓝色；
}
我的纽扣{
背景：红色；/*不可见*/
}

钮扣{
宽度：100px；
高度：100px；
背景颜色：绿色；
边框：实心1px黑色；
}
也许您正在寻找
重要信息如果我不设置属性，我无法设置！重要的是：如果样式可以访问元素，则根本不可能阻止样式设置元素的样式。在几年内，您可能可以使用shadowdom实现它，但现在不太可能。如果CSS可以访问您的元素，它可以设置它们的样式。这就是它的工作原理…@lonesomeday但是我可以用一些东西覆盖任何给定的属性吗？与所有类似：未设置；正如我所说，我对第一个选择器及其指定的属性没有影响。例如，它可以设置填充或其他任何内容。我甚至不知道它的存在，因为我不知道我的代码片段被注入的网站，比如谷歌地图代码片段。它可以应用于任何地方。我正在寻找一种防止外部css影响我的元素的方法。如果css加载到页面上，你无法阻止它影响你的元素。最好不要通过客户端代码加载CSS或删除样式表或样式标记。因此，建议使用内联样式并通过classList删除所有类。删除或类似操作？如果需要，可以使用内联，也可以使用
！重要信息
。使用类列表。删除
customElements.define('solid-button', class extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    const template = document.querySelector('#solid-button-src');
    const clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
  }
});