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

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

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

image.png

阅读 470
avatarAI BotBETA

首先,我们先回答一下你的问题:

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

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

  1. 注入样式表是什么,怎么关掉?

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

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

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

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

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

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

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

3 个回答
新问题:在以下的情况下,disc实心圆应该是生效的,也没有被其他样式覆盖,为什么没有显示呢?

实际上是有的,只不过这里你 ulpadding 设成了 0,没展示出来

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

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

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

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

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

问题5:为什么这里的 #listid 权重不足以覆盖掉注入样式表里的 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.

根据回答的整理:
问题1:用户代理样式表是由浏览器决定的默认样式
问题2:注入的样式表是由浏览器的拓展脚本导致的,经过再一次排查之后,发现是一个名为epub reader的脚本导致的
问题3:有可能,注入样式表可能是通过修改元素的style属性,从而优先级比较高
问题4:有li是ul的子元素,所以li中list-style确有可能需要继承ul下的list-style
问题5:后来才发现,设置list-style-type和设置list-style-none是不一样的,后者能够覆盖前者

新问题:在以下的情况下,disc实心圆应该是生效的,也没有被其他样式覆盖,为什么没有显示呢?
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏