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在应用不同主题时会发生变化吗？我目前正在使用％的宽度或高度。

Answer 1

即使使用不同的主题，当您希望元素的布局看起来相同时，还有很多事情需要考虑：

1。）特异性

研究具体是什么以及如何利用它来发挥作用
如果您想让StyleSheet占据主导地位，请将标记放在之后主导床单。
确保其他人不使用您的班级名称 - 技巧：使用班级前缀
如果一切都失败了，！important 关键字就是你的朋友。

2。）父布局

假设播放按钮的父元素受主题影响并且#play按钮使用百分比，则按钮将占用父母的大小，因为它仍然是依赖的。如果父母不受主题影响会更容易，所以你可能需要回到＃1。

我不知道这个项目页面的总标记，但我希望这会有所帮助。

Answer 2

您需要为您创建包装器并使用命名空间。我不知道你在开发什么，但是例如，如果它的视频播放器插件可能是这样的：

HTML：

<div class="my-video-player">
    <div class="foo">
        <div id="playbutton"></div>
    </div>
    <div class="bar">
    </div>
</div>

现在有html代码，你需要为你的css使用命名空间：

.my-video-player {
    /*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/
}
.my-video-player .foo {
    /*now these styles are based on 'my-video-player' styles*/
    /*so if you use width in percentage its based on the my-video-player width*/
}
.my-video-player .bar {}
.my-video-player #playbutton {}

这样你的css就不会与其他风格碰撞。此外，如果您需要javascript，请执行以下操作：

var myVideoPlayer = {

    foo: function() {
    },

    bar: function() {
    }
};

用法：

myVideoPlayer.foo();

注意：Javascript名称空间可以被外部代码覆盖，因此最好的方法是遵循模块化的javascript模式，但这超出了这个问题的范围。

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

2 个答案: