如何更改此 div 容器上的 css 樣式

Question

我想覆蓋給定的樣式模板：

基於這個例子： https://github.com/evilz/vscode-reveal/blob/master/views/logo.ejs

<div id="logo" style="position: fixed; top: 20px; left: 20px; z-index: 1">
    <img src="Logo.svg">
</div>

我添加了基於此示例的自定義 css 表單： https://github.com/evilz/vscode-reveal/blob/master/libs/reveal.js/3.8.0/css/theme/blood2A217BAZ5F5C

#logo {
  position: fixed;
  top: 100px;
  transform: scale(2.5);
}

自定義主題已加載，但我沒有更改徽標上的設置。

Answer 1

內聯 styles 被解釋為比 css 文件中的更重要，因此要覆蓋它們，您需要使用!important ：

#logo {
    position: fixed;
    top: 100px !important;
    width: 300px;
}

如果允許這樣做，最好刪除內聯 styles。

Answer 2

這是因為 HTML 上的內聯樣式優先於內部/嵌入式 CSS。 所以你可以做的是過度使用 HTML （被認為是一種不好的做法）

<div id="logo" style="position: fixed; top: 100px; width: 300px; left: 20px; z-index: 1">
    <img src="Logo.svg">
</div>

或最佳解決方案：

<div id="logo">
    <img src="Logo.svg">
</div>
#logo {
    position: fixed;
    top: 100px;
    width: 300px;
}