Question

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

我遇到了问题，如果外部选择器选择了我的某个元素，例如通过button{height: 100px;}而我的选择器button .class{width:100px;}没有指定height属性，外部选择器将此属性放在我的按钮上并更改其样式。

这只是一个简单的例子，您可能会说，＆＃34;只需在选择器中指定height＆＃34;，我无法将每个可思考的属性放入我的选择器中并覆盖可能存在于某处的所有内容已经确定。

通过一个简单的例子看到这个小提琴：https://jsfiddle.net/u4rvx6Lk/，我不希望第一个选择器在我的蓝色元素上设置边框，但当然，它确实如此。

我已经尝试了all: unset;和all: initial;，但它不会工作，当然也不会在Internet Explorer中使用。

我也知道范围内的CSS，但这也不能非常可靠地工作。

（更多信息：这是一个角度1.x的应用程序，主要注入WordPress CMS页面，我使用sass编译我的CSS）

Answer 1

对我有用的解决方案是将CSS属性all设置为值revert。

.css-class {
    all: revert;
}

mozilla docs for revert很好地解释了这一点：

revert CSS关键字回滚级联，以便该属性获取当前样式源中没有样式时所具有的值。

对于firefox和chrome，请使用unset：

.css-class {
    all: unset;
}

有关使用“媒体查询黑客”查看当前浏览器以获取跨浏览器解决方案的信息，请参阅browser hacks。另外，请看这个小提琴，其中蓝框不继承高度属性：

我希望这个解决方案也适用于您的项目。

Answer 2

几乎不可能阻止CSS代码修改元素，因为Web目前存在。你实际上在谈论的是沙盒你的元素，防止它们被其他代码修改。

你可以使用iframe执行此操作，但这很可怕而且几乎肯定太过分了。

另一方面，未来是光明的！有一个名为Shadow DOM的功能，它实质上允许您实现自己的元素，并从其余代码中沙箱化它们。已经有input和video等元素在幕后工作：现在我们可以做浏览器多年来一直在做的事情。

您可以创建一个元素：我们将其称为solid-button。

<solid-button></solid-button>

然后我们会编写代码进入其中。我们将其放在template中，因此在我们需要之前它不会出现在屏幕上：

<template id="solid-button-src">
  <style>
    button {
      width: 100px;
      height: 100px;
      background-color: green;
      border: solid 1px black;
    }

  </style>
  <button></button>
</template>

然后我们使用一些Javascript来创建Shadow 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);
  }
});

现在可以在一些浏览器中使用，但远远不足以使其准备就绪。您的用户可以将样式应用于solid-button，但它们不会影响其中的内容。如果你有一个最新的浏览器，你可以在下面看到这个。

显然现在这不是一个解决方案，但它可能是未来。

＆＃13;

customElements.define('solid-button', class extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    const template = document.querySelector('template');
    const clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
  }
});

＆＃13;

button {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
}

.class1 {
  height: 100px;
  width: 100px;
  background-color: blue;
}

my-button {
  background: red; /* does nothing visible */
}

＆＃13;

<button></button>
<button id="id1" class="class1"></button>
<solid-button></solid-button>
<solid-button class="class1"></solid-button>

<template>
  <style>
    button {
      width: 100px;
      height: 100px;
      background-color: green;
      border: solid 1px black;
    }

  </style>
  <button>
    <slot name="content"></slot>
  </button>
</template>

＆＃13;

Answer 3

有关简单示例，请参阅此fiddle。不幸的是，第一个选择器在我的蓝色元素上设置边框。

在第二个框中定义边框的原因是因为它是button，这是您定义边框的位置。这就是CSS的工作原理。如果您不想在第二个元素上使用边框，则需要在第二个元素上定义border: 0;，或者在定义边框的原始选择器中button，使用不包含边框的内容第二个框，如button:not(#id1)。

Answer 4

所以我以某种方式使它成功。谢谢你的回答。

all: unset and revert对我没有用，all: initial没有。

此外，我将给我的内部课程非常具体的名称。与class=my-project-class类似，可以防止外部类选择器注入自己的属性。

这也不适用于IE。

请参阅此小提琴：https://jsfiddle.net/Lvxxnh8r/13/

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

4 个答案: