关于自定义设置样式

Question

自定义组件是可以设置样式的，给v-tag组件设置背景色未生效，是因为v-tag的子元素设置了背景色，而这个子元素和v-tag是一样大的。所以子元素的背景色覆盖了v-tag 的背景色，导致看不出来。可以从下面3张图看出来!

图1表明给自定义组件的样式生效了，图二说明子元素也有背景色，点击两个元素可以看出他们背景颜色区域是重合的，去掉子元素的背景色后，给自定义组件的背景色显示出来了。说明是子元素的背景色覆盖了相同大小的自定义组件父元素。而不是没有生效

Answer 1

提问者 宝慕林3319090 2019-07-05 10:15:34

图一，给v-tag增加了padding，padding区域是v-tag的背景色。如果隐藏v-tag的子元素，v-tag背景全是自己设置的背景色。说明自定义组件的样式生效了。只不过被子元素的背景色给遮住了

Answer 2

7七月 2019-07-04 18:10:31

如何解释 提高优先级就能显示出来？提高优先级和覆盖没有关系吧。或者换个角度来说，如果不是因为恰巧完全重合的就能生效了吗？也就是说不用  ！important也是可以的吗。

事实上，大小不重叠也是不行的。

• 提问者 宝慕林3319090 #1

  大小不重叠也行呀。给v-tag增加padding的话，padding区域就能显示不同于子元素的背景色了，说明给自定义元素设置的背景色生效了。而子元素有设置背景色，所以和父元素的背景色不同。如果给子元素设置visibility:hidden;的话，就可以看到，v-tag的背景色是生效了。看我上面评论又发的两张图

• 7七月 回复 提问者 宝慕林3319090 #2

  意思是，增加!important是多余的？那么对于同一个元素，内置样式和外置样式根据什么来决定？这个已经经过无数次检验了，除了margin不需要提高优先级覆盖，其他都需要加！important来覆盖。你说的父子是指什么？提高优先级是对同一个元素做样式提高呀。