行内样式添加多个style属性,只会加载第一个style里面的样式

行内样式添加多个style属性,只会加载第一个style里面的样式;
很懵逼,不知道我说的是啥?
举个栗子:

<p style="style1"   style="style2" ....>====XXX文本内容XXXX====</p>

今天调整一个元素的样式,我在页面上直接调的时候能正常显示,但是我把style对应的样式添加到标签内的时候,发现页面上的元素死活都没有我添加的新样式,带着疑问做了几个测试,发现是我多写了个style,默认只会加载第一个style,哈哈,一般人都不会犯这个错误的;


测试1: 页面上有三个li,每个li添加一个style样式,页面正常显示;

测试2:给同一个元素,添加两个style样式

  • 两个style设置不同的字体颜色,后面的style不会覆盖前者;


  • 测试发现,页面只能加载到第一个style样式,第二个style不加载;


测试3:同一个style,里面相同的样式属性后者会覆盖前者;

  • 如图,会发现第一个li,字体是粉色的,两个color值都有,但后者显示,前者未显示,说明后者覆盖前者相同的属性;


综上小结:
  • 一个标签内,只能有一个style属性;
    • 多个style,只加载第一个style,后面的不加载;
    • 一般没人这样写,也不会出这种错误;
  • 同一个style,设置相同的样式属性,后者的会覆盖前者的属性值;
    • 页面上两个样式属性都会加载到,但显示的是后者的属性值对应的样式;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,762评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,263评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,846评论 19 139
  • 女人是真正的女人,活明白了,知道自己的压力任何人都分担不了。依赖男人是小女孩专利。自己给自己一切的一切。除了不能自...
    简爱乌阅读 285评论 0 0
  • 最近紫霞挺火的,二十三年前的紫霞和现在的紫霞已然不是同一个了,那个会努力爱拼命爱的那个紫霞已经不见了。至尊宝对紫...
    尔玉吖阅读 464评论 4 3

友情链接更多精彩内容