Question

我想在许多网站的样式中包括select，但是很多网站都对select元素（没有任何类）进行了重命名。

如何在不继承特定网站使用的所有样式的情况下包含我的select？

根据下面的代码片段，我希望my_select不会应用select样式。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 /* 50x more rules that i dont want to overwrite one by one */
}

<!-- Their select -->
<select>
    <option value="">Their select</option>
</select>

<!-- Mine select -->
<select class="my_select" id="my_select">
    <option value="">My select</option>
</select>

Answer 1

这可能是您要寻找的。如果将所有属性设置为初始值，则可以从干净的样式编写自定义样式。但是，这可能会导致一些意想不到的后果，因为初始值可能与您期望的值不完全相同。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid red;
 /* 50x more rules that i dont want to overwrite one by one */
}

.my_select {
    all: initial;
    /* Set all of your own styles here */
}

<!-- Their select -->
<select>
    <option value="">Their select</option>
</select>

<!-- Mine select -->
<select class="my_select" id="my_select">
    <option value="">My select</option>
</select>

Answer 2

给您选择一个外部站点不太可能使用的唯一ID：

ul#somethingsomething { styles.... }

Answer 3

对于AFAIK，您根本无法做到这一点，CSS完全是关于特异性的，如果您仅引用一个元素标签，但是您要在其上的站点具有相同的元素标签+ class，您将获得样式，就是这样，您要么必须更具体地使用CSS（使用id，class等，或者在最坏的情况下使用!important），要么使用JavaScript进行设置

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如何在不继承样式的情况下将元素包含在multipe网站上？

3 个答案: