我可以在cpanel中使用！important吗？我使用 viewen 并获得了 cpanel，但无法在我的 css 中使用 ！important 属性

Question

我似乎不能在我的cpanel中使用！important属性。这是一个常见问题吗

由于某种原因，我无法让我的桌面媒体查询中的一个 css 工作。我在同一媒体查询中的其他 css 响应正常，但不适用于以下情况：

div.primervideos_heading {
position: absolute;
left: 7em;
top: 56em;
font-family: 'Lobster', cursive;
font-size: 1.5em;
text-decoration: underline;
white-space: nowrap;
}

我似乎在这里根本无法使用定位....

Answer 1

尝试position: relative父元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

绝对

定位元素是其计算位置值为绝对或固定的元素。顶部、右侧、底部和左侧属性指定与元素包含块边缘的偏移量。(包含块是相对于元素定位的祖先。如果元素具有边距，则会将其添加到偏移中。

例如：

div.primervideos_container {
background: yellow;
border: 1px solid black;
display: block;
height: 100px;
position: relative; 
width: 300px;
}
div.primervideos_heading {
position: absolute;
left: 2em;
top: 1em;
font-family: 'Lobster', cursive;
font-size: 1.5em;
text-decoration: underline;
white-space: nowrap;
}

<div class="primervideos_container">
<div class="primervideos_heading">Heading</div>
</div>

Answer 2

您没有给我们足够的信息来给您一个明确的答案。为此，您还需要发布运行 CSS 的 HTML。然而，我怀疑 Armel 的答案是正确的：你试图绝对定位你的元素，而没有具有相对定位的包含元素。

下面是如何正确操作的示例：

div.container {
position: relative;
height: 180px;
width: 500px;
background-color: blue;
}
div.primervideos_heading {
position: absolute;
left: 50px;
top: 50px;
font-family: 'Lobster', cursive;
font-size: 1.5em;
text-decoration: underline;
white-space: nowrap;
padding: 0 20px;
background-color: cyan;
}

<div class="container">
<div class="primervideos_heading">
Here's some text in the inner div.
</div>
</div>

现在，我将假设你很难获得你的绝对定位，并认为原因是其他选择器正在覆盖你的选择器，所以你试图用"核选项"覆盖它：position: absolute !important;正如我们所解释的那样，这当然不会帮助你。

更重要的是，我怎么强调都不为过，仅仅因为您无法弄清楚为什么您的声明("声明"是带有选择器和某些属性的 CSS 代码块)不起作用，就使用!important是非常糟糕的做法。这种习惯会把你的代码变成一团糟。

使用它的原因是，当您确切地知道为什么其中一个选择器被另一个选择器覆盖时，并且您无法(或至少非常尴尬)增加选择器的特异性以覆盖它。(如果你不明白我的意思，谷歌"css 特异性"并查找它。您应该很少使用!important(如果有的话)，并且应该将其视为最后的手段。

最后，您可能根本不想使用绝对定位。如果你试图，比如说，你的文本居中，你最好使用display: flex，让CSS完成所有的定位工作。

div.container {
height: 180px;
width: 500px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center; 
}
.primervideos_heading {
font-family: 'Lobster', cursive;
font-size: 1.5em;
text-decoration: underline;
white-space: nowrap;
padding: 0 20px;
background-color: cyan;
}

<div class="container">
<div class="primervideos_heading">
Here's some text in the inner div.
</div>
</div>