css3 - css中的用户代理样式表和注册样式表是什么?

Question

我写了个最简单的ul,li。默认的样式应该是li的前面有个实心圆的，但是浏览器打开并没有出现，然后我用开发者工具检查了下它，发现有个注入样式表和用户代理样式表覆盖了我的样式。于是我上网查了下，这是我自己的迷糊理解：用户代理样式表是浏览器自带的，doctype也写了，目前我也找不到它在哪里就代入了，注入样式表可能是我的某个浏览器插件影响了页面，但是我关掉了所有的插件，还是没有解决。
于是，我尝试给ul使用id选择器，想着权重会高一点，但是还是被覆盖了，然后我又加了!important，还是无济于事。
下图是加了id选择器之后的调试工具显示的页面。

我的问题如下：
1.用户代理样式表是什么？可以关掉吗？
2.注入样式表是什么，怎么关掉？
3.动态样式的优先级比!important还要高吗？
4.怎么来的莫名其妙的继承，明明没有写啊，另外这里的继承是什么意思？
5.为什么这里的#list的id权重不足以覆盖掉注入样式表里的ul元素权重

Answer 1

检查你的浏览器扩展，一般都是浏览器扩展插件导致的这样的问题。

问题1：用户代理样式表是什么？可以关掉吗？
用户代理样式表就是用户自己配置的样式表。一般就是客户端用户自己配置的一些创建的。比如说检查一下你安装的油猴脚本，看看是不是有一些什么全局UI美化的脚本。因为一般情况下是不会出现用户代理样式表的。

问题2：注入样式表是什么，怎么关掉？
注入样式表，暂时没有遇到过。一般也是浏览器安装的扩展脚本导致的问题。

问题3：动态样式的优先级比 !important 还要高吗?
看情况，也就是选择器的命中程度，这个需要结合你的问题4来回答

问题4：怎么来的莫名其妙的继承，明明没有写啊，另外这里的继承是什么意思？
这个就是CSS样式的继承问题，比如说截图中选中的是 li 元素，而你在你的CSS中 #list1 的样式是给 ul 元素添加的，这个时候你的 li 元素的 list-style-type 就是你在 #list1 中声明的 disc 样式。

问题5：为什么这里的 #list 的 id 权重不足以覆盖掉注入样式表里的 ul 元素权重
正常情况下，我们书写CSS的时候，ID选择器的权重是会比元素选择器的权重高的，但是这个 !important 权重在不同的样式表中是不一样的（作者样式表 author stylesheets、用户样式表 user agent stylesheets、注入样式表 injected stylesheet）。
在你的这个场景下， 你自己的样式先被用户端代理样式覆盖了，然后用户端样式再都被注入的样式覆盖。按照你这样的情况来看注入的样式权重会更高。

这个规则需要在标准中查阅 �� Draft - 6.3. Important Declarations: the !important annotation - W3C Editor’s Draft

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet, which override those in the user-agent’s default style sheet. To balance this, a declaration can be marked important, which increases its weight in the cascade and inverts the order of precedence.

Answer 2

首先，我们先回答一下你的问题：

1. 用户代理样式表是什么？可以关掉吗？

用户代理样式表是由浏览器（如 Chrome、Firefox 等）自带的样式表。这些样式表旨在为那些没有自定义样式的网页提供统一的视觉体验。用户代理样式表不能被直接关闭，因为关闭它们会导致网页呈现不一致。

2. 注入样式表是什么，怎么关掉？

注入样式表通常是由网页上的脚本动态添加的。这些样式表可能会由各种原因产生，例如：浏览器插件、网站脚本或广告网络。要关闭注入样式表，你需要找到并删除或禁用导致它们出现的脚本或插件。如果你已经关闭了所有插件，但问题仍然存在，那么可能是由网站本身的脚本引起的。在这种情况下，你可能需要联系网站管理员或寻找其他解决方案。

3. 动态样式的优先级比!important还要高吗？

在 CSS 中，样式的优先级是由多个因素决定的，包括选择器的类型、特指性（specificity）和源顺序。一般来说，动态样式（如由脚本添加的样式）的优先级可能高于内联样式（在 HTML 元素中直接使用 style 属性定义的样式），但不一定高于外部或内部样式表中的样式。而 !important 规则可以覆盖任何其他声明，只要它出现在任何其他声明之后。因此，在正常情况下，动态样式的优先级不会高于 !important。

4. 怎么来的莫名其妙的继承，明明没有写啊，另外这里的继承是什么意思？

CSS 中的继承是指某些 CSS 属性值会从父元素传递给子元素。例如，如果你为一个 <div> 设置了字体大小，那么该 <div> 中的所有文本都将继承这个字体大小。然而，并非所有 CSS 属性都是可继承的。你可以查阅相关文档来了解哪些属性是可继承的。

5. 为什么这里的#list的id权重不足以覆盖掉注入样式表里的ul元素权重

CSS 的特指性（specificity）决定了样式规则的优先级。一个选择器的特指性由其选择器的类型和组成决定。例如，id 选择器的特指性高于类选择器和元素选择器，而内联样式的特指性高于外部和内部样式表中的样式。如果一个规则的特指性更高，那么它将覆盖具有较低特指性的规则。在你的例子中，如果注入样式表中的 ul 选择器的特指性高于 #list 选择器，那么它就会覆盖 #list 的样式。要提高你的规则的优先级，你可以尝试增加其特指性或使用 !important。