【问题标题】:CSS loading is incorrectCSS 加载不正确
【发布时间】:2017-05-05 19:35:15
【问题描述】:

我在页面中嵌入了 CSS 为 <style type="text/css">,我将 CSS 称为使用 <link href>

如何确保<link> 中指定的CSS 在<style type="text/css"> 之前首先加载?

现在,嵌入在页面中的 css 优先,导致一些样式问题。 在下图中,我需要.sanddbox dropdown-menu 优先于.dropdown-menu。如果我使用 link 标签加载 css 文件,我可以得到这个。 但我希望它们嵌入到页面中。

【问题讨论】:

  • 按您希望它们加载的顺序放置标签?
  • min.js(包含动态 CSS 注入的信息)是使用 require(".js") 加载的。而css在html里面。
  • 研究 CSS 的特殊性是否有意义?加载 CSS 的顺序无关紧要。
  • 我用一些技术术语更新了这个问题。希望说明清楚。
  • 我没用过require。你能不告诉它把link标签放在哪里吗?解决订单将解决什么问题?您是否在 link 标记中声明了一个您想使用相同选择器在 style 标记中覆盖的类?

标签: javascript css


【解决方案1】:

页面中的线条样式和样式块将始终覆盖任何外部 css 文件。正确的做法是删除内联 css。我假设您出于某种原因不能这样做(有很多)。那么克服这个问题的唯一方法是将!important放在css文件中的属性之后。

例如:

div.test {
    color: blue !important;
}

【讨论】:

  • 外部CSS文件有很多属性。我是否需要将 !important 包含在类中的每个属性中?
  • 不,几乎不需要使用!important。只需确保选择器或更具体。
  • 选择器更具体。例如:元素具有类sample dropdown。在外部 css 中我有 .sample dropdown。页面中嵌入了一个引导程序dropdown 样式。所以,bootstrap dropdown 中的属性优先于.sample dropdown
  • 你可以从附图中看到。我需要.sandbox dropdown-menu 优先于.dropdown-menu
  • .sandbox-dropdown-menu 并不比 .dropdown-menu 更具体。它们具有完全相同的特异性水平。 div.sandbox-dropdown-menu 会更具体。如果元素同时具有两个类,.dropdown-menu.sandbox dropdown-menu 会更具体。在此处阅读特异性developer.mozilla.org/en-US/docs/Web/CSS/Specificity
猜你喜欢
  • 1970-01-01
  • 2019-07-11
  • 2016-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-19
  • 2018-11-15
  • 2021-04-04
相关资源
最近更新 更多