gpt4 book ai didi

javascript - CSS样式执行的优先顺序

转载 作者:行者123 更新时间:2023-11-30 11:57:22 26 4
gpt4 key购买 nike

我对应用于 HTML 的 CSS 样式的顺序感到困惑。我正在创建 HTML 元素并从 JavaScript 添加样式。此外,我还有一个应用于元素的样式表

JavaScript:

element.style.someStyle = ' ';

element.classList.add('style');

CSS:

element { 
someStyle = ' '
}

优先顺序是什么?

最佳答案

What is the sequence of application?

以下是样式如何应用的优先顺序。

  1. Inline - 放置在 HTML 中元素标签本身。
  2. Internal - 放置在 View 页面内 <style>标签。
  3. 外部 - 放置在外部样式表 (.css) 文件中。

也就是说 - 最靠近 HTML 标记的样式将优先。

为了证明这一点,下面是一个简短的例子:

/* external style sheet */
body
{
background-color: red;
}
<!Document HTML>

<style type="text/css">
/* internal style */
body
{
background-color: green;
}
</style>

<!-- inline style -->
<body style = "background-color: blue">

<h1>Hey there!</h1>

</body>

</HTML>

如您所见,无论在内部/外部样式中定义了什么,主体都按照优先顺序显示为蓝色

但是,您可以使用 !important 使在任何级别定义的任何样式在任何位置取代您的样式。关键字与您的样式,但应明智且有目的地使用。

I am creating HTML elements from javascript and adding styles and classes.

通过 JavaScript 添加样式会作为内联样式应用于该特定标记。这意味着如果您在其他地方编写了相同的样式,那么它可能无法工作,除非您使用 !important

但是一般不建议通过JavaScript添加样式。因为如果您广泛使用它,它会降低您网页的性能。

更好的方法是从 JavaScript 切换 CSS 类,因为这样您就不会显式切换 CSS 样式。

关于javascript - CSS样式执行的优先顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37543677/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com