Question

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

的JavaScript：

element.style.someStyle = ' ';

element.classList.add('style');

CSS：

element { 
    someStyle = ' ' 
}

优先顺序是什么？

Answer 1

申请顺序是什么？

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

内嵌：直接放在HTML元素标记中。
内部：放置在<style>标记内的个别视图页面中。
外部：放置在外部（.css）样式表中。

请记住，声明最接近HTML标记的样式将优先。例如，

<style type="text/css">

/* internal style */
body
{
    background-color: white;
}
</style>

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

外部样式表

body
{
    background-color: black;
}

在上面的设置中，无论内部或外部样式表中定义了什么，正文都会按照优先顺序使用绿色。但是，您可以通过在样式中使用!important关键字来使内部/外部样式具有最高优先级，但应明智地选择它。

我正在从javascript创建HTML元素并添加样式和类。

通常不建议通过JavaScript添加样式，因为该过程成本高昂，如果您广泛使用它，则会大大降低性能。除了其他技术原因，请关注您的问题。

每当您从脚本添加样式时，它都会在HTML元素标记上作为内联样式应用。这意味着如果您在其他地方编写了相同的样式，则可能无效。

另一方面，从脚本切换CSS类被认为是一种好方法，因为这样你就不会实际添加样式。

IMO，keeping the styles on external style sheet得到的回报非常好，因为，

它将事物分开，放在一个易于管理的地方。视图不应该负责声明样式，甚至不是脚本。这是CSS的工作。
它消除了不必要的污染，否则会使代码难以阅读。
浏览器可以缓存样式表，并且不会将其下载以供后续访问。这意味着您的样式将更快地应用，页面显示响应更快。

Answer 2

假设您的网站是房子;

你家中的HTML将成为所有的墙壁，列等等。他们自己看起来很难看。

CSS可以将风格放在它们上面，如绘画，设计等等。

您首先构建房屋（HTML），然后绘制它（CSS）。但是随着时间的推移你意识到你需要为你的房子添加一个新房间（HTML），构建器（JS）会添加新房间，并将CSS放在适用于新元素的位置。

每次构建器（JS）向房屋添加新零件（HTML）时，设计器（CSS）都会对其进行样式化。

现在实践中：

你应该在顶部加载你的CSS（头标记），这样所有样式都可以在需要时准备好。在其他人手中，JS应该在正文的结束标记之前加载。

Answer 3

外部内部排队 Javascript

CSS样式的优先执行顺序

的JavaScript：

CSS：

3 个答案:

假设您的网站是房子;

现在实践中：