css - 插件 css 被主题覆盖并损坏插件布局

Question

我目前正在 wordpress 中开发一个插件，问题是它的布局随着不同主题的布局而变化。

如何使插件 css 不会改变应用的任何主题？

#playbutton
{
    z-index:99;
    bottom:15%;
    padding: 10px;
    right:0px;
    position:absolute;
    font-size: 95%;
    width:24%;
    height:10%;
    text-align:center;
    color:white;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000         0, endColorstr=#99000000);
    -ms-filter:                 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,         endColorstr=#99000000)';
    border:1px solid #bfbcc5;
}

这是应用不同主题时会发生变化的 css 吗？我目前在 width 或 height 中使用 % 。

Answer 1

如果您希望元素的布局在使用不同主题时看起来相同，则需要考虑很多事情:

1.) 特异性

• 研究什么是特殊性以及如何利用它来发挥自己的优势
• 如果您想让您的样式表更具优势，请将标记放在之后占主导地位的床单。
• 确保您的类名没有被其他人使用 - 技巧:使用类前缀
• 如果一切都失败了，!important 关键字就是您的 friend 。

2.) 父布局

• 假设播放按钮的父元素受主题影响并且#playbutton 使用百分比，则按钮可能会采用父元素的大小，因为它仍然依赖。如果家长不受主题的影响会更容易，因此您可能需要返回 #1。

我不知道这个元素页面的总标记是什么，但我希望这会有所帮助。