在HTML页面中，如果用户的浏览器禁用了JavaScript，你可以使用 `<noscript>`标签来显示一条替代性的信息。例如：

```html
<!DOCTYPE html>
<html>
<head>
    <title>检测JavaScript是否启用</title>
</head>
<body>
    
    <script type="text/javascript">
        document.write("JavaScript已经被启用！");
    </script>
    
    <noscript>
        <p>JavaScript被禁用了。本网站的某些功能可能无法正常工作，请启用JavaScript。</p>
        // 或者  
        <meta http-equiv="refresh" content="0; url=whatyouwant.html" />
    </noscript>
</body>
</html>
```

上面的例子展示了当JavaScript被禁用时，页面会展示 `<noscript>`标签里面的内容。如果JavaScript是启用的，`<script>`标签内的代码会被执行，并且页面会显示“JavaScript已经被启用！”的消息。

请注意，使用 `<noscript>`标签只是一种给用户提示信息的简单方式，并不是一种程序化的检测方法。如果你需要在服务器端检测JavaScript是否被禁用，通常需要使用不依赖于JavaScript的后备方法，比如通过表单提交来判断，因为没有JavaScript支持，异步的JavaScript请求（例如使用Ajax）将不会发生，只能依靠传统的同步请求。

我想在这里添加我的 .02。它不是 100% 防弹，但我认为它已经足够好了。

对我来说，首选的例子是发布某种“如果没有 Javascript，这个网站就不能正常工作”的消息，问题是您需要确保您的网站在没有 Javascript 的情况下也能正常工作。一旦你开始走这条路，你就会开始意识到网站应该是防弹的，并且关闭 JS，这是一大堆额外的工作。

所以，你真正想要的是“重定向”到一个页面，上面写着“打开 JS，傻瓜”。但是，当然，您无法可靠地进行元重定向。所以，这是建议：

    <noscript>
        <style type="text/css">
            .pagecontainer {display:none;}
        </style>
        <div class="noscriptmsg">
        You don't have javascript enabled.  Good luck with that.
        </div>
    </noscript>
    

...您网站中的_所有_内容都用“pagecontainer”类的 div 进行包装。 noscript 标签内的 CSS 将隐藏所有页面内容，并显示您想要显示的任何“no JS”消息。这实际上就是 Gmail 所做的……如果它对 Google 来说足够好，那么对我的小网站来说也足够好。

我假设您正在尝试决定是否提供 JavaScript 增强内容。最好的实现会彻底降级，以便网站在没有 JavaScript 的情况下仍然可以运行。我还假设您指的是[服务器端](https://www.seguetech.com/client-server-side-code/ "“客户端与服务器端代码：有什么区别？”")检测，而不是[`<noscript>`](https://www.w3.org/TR/html52/semantics-scripting.html#the-noscript-element "WC3 建议：<noscript> 元素 (HTML 5.2)")出于无法解释的原因使用该元素。

没有好的方法来执行服务器端 JavaScript 检测。作为替代方案，可以[使用 JavaScript 设置 cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie "MDN：文档.cookie")，然后在后续页面视图中使用服务器端脚本测试该 cookie。然而，这不适合决定要传送什么内容，因为它无法将没有 cookie 的访问者与新访问者或不接受 JavaScript 设置 cookie 的访问者区分开来。

[`noscript`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fnoscript)块在 JavaScript 被禁用时执行，通常用于显示您在 JavaScript 中生成的替代内容，例如

    <script type="javascript">
        ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
    </script>
    <noscript>
        <a href="next_page.php?nojs=1">Next Page</a>
    </noscript>
    

没有 js 的用户将获得`next_page`链接 - 您可以在此处添加参数，以便在下一页上知道他们是否通过 JS/非 JS 链接访问，或者尝试通过 JS 设置 cookie，如果没有 JS 则意味着 JS被禁用。这两个例子都相当琐碎并且容易被操纵，但你明白了。

如果您想要纯粹统计有多少用户禁用了 javascript，您可以执行以下操作：

    <noscript>
        <img src="no_js.gif" alt="Javascript not enabled" />
    </noscript>
    

然后检查您的访问日志以查看该图像被点击了多少次。这是一个稍微粗糙的解决方案，但它会给您一个关于用户群百分比的好主意。

上述方法（图像跟踪）对于纯文本浏览器或根本不支持 js 的浏览器不太适用，因此如果您的用户群主要转向该领域，这可能不是最好的方法。

这对我有用：如果禁用 javascript，它会重定向访问者

    <noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

我建议您反其道而行之，编写不引人注目的 JavaScript。

让项目的功能适用于禁用 JavaScript 的用户，完成后，实现 JavaScript UI 增强功能。

[https://en.wikipedia.org/wiki/Unobtrusive\_JavaScript](https://en.wikipedia.org/wiki/Unobtrusive_JavaScript)

如何检测 javascript 是否被禁用？

是的，`:not()` 伪类选择器可以接受多个选择器作为它的参数。这表示可以指定多个条件来排除一组元素。在CSS选择器等级4的规范中，`:not()` 已经得到了扩展，允许它接受逗号分隔的选择器列表作为它的参数，这意味着它可以同时排除多种选择器匹配的元素。

例如，如果你想选择那些既不是类`.class1`也不是类`.class2`的`<p>`元素，你可以这样写：

```css
p:not(.class1, .class2) {
  /* 样式规则 */
}
```

在这个例子中，任何带有`.class1`或`.class2`类的`<p>`元素都不会被选中，而其他所有`<p>`元素都会应用这里定义的样式。

需要注意的是，尽管CSS选择器等级4的规范支持多参数的`:not()`，但并非所有浏览器都实现了这一特性。因此，在使用时应该检查浏览器的兼容性情况，或者使用一些工具，如PostCSS等，来帮助转换这些现代CSS特性，以确保兼容旧版浏览器。在编写代码时，也应该考虑回退方案，以保证功能的正常使用。

为什么：不只使用两个`:not`：

    input:not([type="radio"]):not([type="checkbox"])
    

_是的，这是故意的_

从 CSS 选择器 4 开始，在`:not`选择器中使用多个参数成为可能（[请参见此处](https://www.w3.org/TR/selectors4/#negation)）。

> 在 CSS3 中，:not 选择器只允许 1 个选择器作为参数。在 4 级选择器中，它可以将选择器列表作为参数。

例子：

    /* In this example, all p elements will be red, except for 
       the first child and the ones with the class special. */
    
    p:not(:first-child, .special) {
      color: red;
    }
    

不幸的是，浏览器支持[有点新](https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility)。

如果您在项目中使用 SASS，我构建了这个 mixin 以使其按照我们希望的方式工作：

    @mixin not($ignorList...) {
        //if only a single value given
        @if (length($ignorList) == 1){
            //it is probably a list variable so set ignore list to the variable
            $ignorList: nth($ignorList,1);
        }
        //set up an empty $notOutput variable
        $notOutput: '';
        //for each item in the list
        @each $not in $ignorList {
            //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
            $notOutput: $notOutput + ':not(#{$not})';
        }
        //output the full :not() rule including all ignored items
        &#{$notOutput} {
            @content;
        }
    }
    

它可以通过两种方式使用：

**选项 1：内联列出忽略的项目**

    input {
      /*non-ignored styling goes here*/
      @include not('[type="radio"]','[type="checkbox"]'){
        /*ignored styling goes here*/
      }
    }
    

**选项 2：首先列出变量中被忽略的项目**

    $ignoredItems:
      '[type="radio"]',
      '[type="checkbox"]'
    ;
    
    input {
      /*non-ignored styling goes here*/
      @include not($ignoredItems){
        /*ignored styling goes here*/
      }
    }
    

**任一选项的输出 CSS**

    input {
        /*non-ignored styling goes here*/
    }
    
    input:not([type="radio"]):not([type="checkbox"]) {
        /*ignored styling goes here*/
    }

我在这方面遇到了一些麻烦，“X:not():not()”方法对我不起作用。

我最终采用了这个策略：

    INPUT {
        /* styles */
    }
    INPUT[type="radio"], INPUT[type="checkbox"] {
        /* styles that reset previous styles */
    }
    

它并不那么有趣，但当 :not() 好斗时它对我有用。它并不理想，但很坚固。

如果您[安装了“cssnext”Post CSS 插件](https://cssnext.github.io/setup/)，那么您就可以安全地开始使用您现在想要使用的语法。

使用 cssnext 将会变成这样：

    input:not([type="radio"], [type="checkbox"]) {
      /* css here */
    }
    

进入这个：

    input:not([type="radio"]):not([type="checkbox"]) {
      /* css here */
    }
    

[https://cssnext.github.io/features/#not-pseudo-class](https://cssnext.github.io/features/#not-pseudo-class)

`:not()` 伪类选择器可以接受多个选择器作为它的参数。这表示可以指定多个条件来排除一组元素。在CSS选择器等级4的规范中，`:not()` 已经得到了扩展，允许它接受逗号分隔的选择器列表作为它的参数，这意味着它可以同时排除多种选择器匹配的元素。

例如，如果你想选择那些既不是类 `.class1`也不是类 `.class2`的 `<p>`元素，你可以这样写：

```css
p:not(.class1, .class2) {
  /* 样式规则 */
}
```

在这个例子中，任何带有 `.class1`或 `.class2`类的 `<p>`元素都不会被选中，而其他所有 `<p>`元素都会应用这里定义的样式。

需要注意的是，尽管CSS选择器等级4的规范支持多参数的 `:not()`，但并非所有浏览器都实现了这一特性。因此，在使用时应该检查浏览器的兼容性情况，或者使用一些工具，如PostCSS等，来帮助转换这些现代CSS特性，以确保兼容旧版浏览器。在编写代码时，也应该考虑回退方案，以保证功能的正常使用。

CSS 中 Not 伪类可以有多个参数吗？

要删除 HTML 中的 `<iframe>` 元素的边框，您可以通过 CSS 设置 `border` 属性为 `0` 或 `none`。这里有两种方法可以实现：

### 方法 1：直接在 `iframe` 标签内使用 `style` 属性

```html
<iframe src="example.html" style="border:none;"></iframe>
```

或者

```html
<iframe src="example.html" style="border:0;"></iframe>
```

### 方法 2：通过 CSS 文件或 `<style>` 标签

在 CSS 中，您可以为 `iframe` 指定一个类，然后为这个类设置 `border` 属性为 `0` 或 `none`。

```html
<style>
  .no-border {
    border: none;
  }
</style>

<iframe class="no-border" src="example.html"></iframe>
```

或者，如果您想对页面中的所有 `iframe` 元素移除边框，您可以直接对 `iframe` 元素进行样式设定：

```html
<style>
  iframe {
    border: 0;
  }
</style>

<iframe src="example.html"></iframe>
```

请根据您的具体需求选择合适的方法。如果您的 `iframe` 是通过 JavaScript 动态创建的，您也可以在创建 `iframe` 元素时设置其 `style.border` 属性。

添加`frameBorder`属性（注意**大写“B”**）。

所以它看起来像：

    <iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>

在疯狂尝试删除 IE7 中的边框后，我发现frameBorder属性是区分大小写的。

您必须使用大写**B**设置 frameBorder 属性。

    <iframe frameBorder="0"></iframe>

根据[iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)文档，frameBorder 已弃用，最好使用“border”CSS 属性：

    <iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
    

*   注意 CSS border 属性在 IE6、7 或 8 中无法达到预期效果**。**

除了添加frameBorder属性之外，您可能还需要考虑将滚动属性设置为“no”以防止出现滚动条。

    <iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >

对于浏览器特定问题还`frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"`根据 Dreamweaver 添加：

    <iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>

如何删除 iframe 的 border ？

在 CSS 中，可以使用 `@import` 规则将一个 CSS 文件引入到另一个 CSS 文件中。这样做可以帮助你将样式表分割成更小、更易于管理的片段。以下是 `@import` 规则的基本语法：

```css
@import url("path/to/stylesheet.css");
```

你可以将这个规则放在主 CSS 文件的最顶部，来引入其他的 CSS 文件。这里是一个例子：

```css
/* 在 main.css 文件中 */
@import url("reset.css");
@import url("typography.css");
@import url("layout.css");
@import url("colors.css");

/* 其他的 CSS 规则... */
```

在上面的示例中，`main.css` 文件引入了四个其他的 CSS 文件：`reset.css`、`typography.css`、`layout.css` 和 `colors.css`。每个文件包含了不同的样式规则，比如 `reset.css` 可能包含了 CSS 重置规则，而 `typography.css` 包含了针对字体和文本的样式等。

请注意，使用 `@import` 有以下几点需要考虑：

1. **性能**：每次使用 `@import` 时，浏览器都会发起一个新的 HTTP 请求来获取对应的 CSS 文件。如果有很多 `@import` 规则，这可能会导致加载时间变长，因为浏览器需要处理每个导入的文件，而且这些请求是连续的，一个接一个地发生，而不是并行的。
   
2. **维护性**：虽然将 CSS 分割成多个文件可以帮助组织代码，使其更易于维护，但是过多的切分也可能导致难以追踪特定样式声明所在的文件。

3. **兼容性**：几乎所有的现代浏览器都支持 `@import` 规则，但是在过去，一些旧的浏览器可能没有很好地支持这个特性。

4. **优先级**：使用 `@import` 引入的样式将在主 CSS 文件中随后声明的样式之前加载。如果在主文件中有相同选择器的规则，它们将覆盖 `@import` 引入的样式。

5. **使用限制**：`@import` 规则必须位于 CSS 文件的最开始部分，除了 `@charset` 声明之外，它前面不能有任何 CSS 规则或者其他 `@` 规则。

在实际开发中，许多开发者会选择使用预处理器（如 Sass、Less）或构建工具（如 Webpack、Gulp）来管理和合并 CSS 文件，因为它们提供了更先进的管理和优化功能。

是的：

    @import url("base.css");
    

笔记：

*   该[`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import)规则[必须先于](https://drafts.csswg.org/css-cascade-3/#at-import)所有其他规则（除了`@charset`）。
*   附加`@import`语句需要附加服务器请求。作为一种替代方法，将所有 CSS 连接到一个文件中以避免多个 HTTP 请求。例如，将`base.css`和的内容复制`special.css`到`base-special.css`和 仅引用中`base-special.css`。

是的。可以将 CSS 文件导入到另一个 CSS 文件中。

它必须是样式表中使用[@import 规则的](http://www.w3.org/TR/CSS21/cascade.html#at-import)第一条规则。

    @import "mystyle.css";
    @import url("mystyle.css");
    

唯一需要注意的是旧版网络浏览器不支持它。事实上，这是向旧版浏览器隐藏 CSS 样式的 CSS“黑客”之一。

请参阅[此列表](http://www.westciv.com/style_master/academy/browser_support/basic_concepts.html)了解浏览器支持。

工作`@import url("base.css");`正常，但请记住，每个`@import`语句都是对服务器的新请求。这对您来说可能不是问题，但是当需要最佳性能时，您应该避免使用`@import`.

CSS`@import`规则就是这样做的。例如，

    @import url('/css/common.css');
    @import url('/css/colors.css');

是的。

    @import "your.css";
    

该规则记录[在此处](http://www.w3.org/TR/CSS2/cascade.html#at-import)。

Web 项目中如何在一个文件中引入另一个 css 文件？

在 CSS 中，虽然没有直接的属性可以完全“禁用”链接，但我们可以通过一些技巧来实现类似的效果。一种常见的方法是通过改变链接的行为，使其看起来和表现得像是被禁用的。以下是一些例子:

1. **改变颜色和去除下划线**：可以将链接的颜色设置为与普通文本相同，并去除下划线，这样用户就不会认为它是一个可以点击的链接。

```css
a.disabled {
  color: gray;
  text-decoration: none;
  pointer-events: none; /* 禁止鼠标事件 */
  cursor: default; /* 修改鼠标样式 */
}
```

2. **禁止鼠标事件 (`pointer-events`)**：通过设置 `pointer-events` 属性为 `none`，可以禁止用户对链接执行鼠标相关的操作。

```css
a.disabled {
  pointer-events: none;
  cursor: default;
}
```

3. **修改光标**：通过将 `cursor` 属性设置成 `default` 或 `not-allowed`，可以让用户感觉链接不可被点击。

```css
a.disabled {
  cursor: not-allowed;
}
```

使用这些 CSS 规则，你可以给链接添加 `disabled` 类，以实现视觉上的禁用效果：

```html
<a href="https://example.com" class="disabled">不可点击的链接</a>
```

但要注意的是这些方法并不能真正阻止链接的点击事件；它只是在视觉上表现为禁用，并且阻止了鼠标事件。这意味着如果用户使用键盘导航到这个链接，还是可以通过按下回车键来激活链接的。如果需要从功能上完全禁用链接，可能还需要使用 JavaScript 或修改 HTML（例如去掉 `href` 属性）。

从[这个解决方案](http://css-tricks.com/pointer-events-current-nav/)：

    [aria-current="page"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none;
      color: black;
    }

    <a href="link.html" aria-current="page">Link</a>

运行代码片段Hide results

展开片段

有关浏览器支持，请参阅[https://caniuse.com/#feat=pointer-events](https://caniuse.com/#feat=pointer-events)。如果您需要支持 Internet Explorer，有一个解决方法；看到[这个答案](https://stackoverflow.com/a/10276157/1207195)。

[`pointer-events`](https://developer.mozilla.org/en-US/docs/CSS/pointer-events)警告：在 CSS 中对非 SVG 元素使用是实验性的。该功能曾经是 CSS 3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS 4。

.disabled {
      pointer-events: none;
      cursor: default;
      opacity: 0.6;
    }

    <a href="#" class="disabled">link</a>

运行代码片段Hide results

展开片段

CSS 只能用于改变某些东西的样式。使用纯 CSS 最好的办法就是完全隐藏链接。

您真正需要的是一些 JavaScript 代码。以下是您如何使用 jQuery 库做您想做的事情。

    $('a.current-page').click(function() { return false; });

CSS 无法禁用链接。它可以抑制点击等指针事件，但点击并不是激活链接的唯一方式。您的选择是：

*   不要在标记中包含`href`或属性。`onclick``<a>`
*   使用`document.querySelector`et al 找到您想要禁用的锚元素。删除它们的`href`或`onclick`属性，以便它们不再具有可以通过任何方法激活的链接行为。

**引导程序禁用链接**
------------

    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    
    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    

**Bootstrap 禁用按钮，但看起来像链接**
--------------------------

    <button type="button" class="btn btn-link">Link</button>

如何仅使用 css 来禁用链接？

在CSS中，没有直接等价于HTML中`cellpadding`和`cellspacing`属性的CSS属性。不过，你可以使用CSS的一些属性来达到相同的效果。

### CSS 实现 `cellpadding` 的效果

在HTML中，`cellpadding`属性用于设置表格单元格内部内容与其边界之间的空间。在CSS中，你可以通过设置单元格内的`padding`属性来实现相同的效果。

例如，如果你想要设置所有单元格的内边距为10px，你可以这样写：

```css
td, th {
  padding: 10px;
}
```

### CSS 实现 `cellspacing` 的效果

HTML中的`cellspacing`属性表示单元格之间的距离。在CSS中，这可以通过设置`border-spacing`属性来实现，但这个属性只适用于`border-collapse`属性为`separate`的表格。

下面是一个例子，设置单元格之间的间距为5px：

```css
table {
  border-collapse: separate;
  border-spacing: 5px;
}
```

如果你使用`border-collapse: collapse;`，边框会合并，这种情况下`border-spacing`将不起作用。在`border-collapse: collapse;`模式下，单元格之间实际上没有间距，它们的边框会合并在一起。如果你希望在合并边框的情况下有间隙效果，你需要通过其他方式，比如添加透明边框来实现。

例如，给单元格增加一个透明边框：

```css
td, th {
  border: 5px solid transparent;
}
```

### 结合使用

如果你想把`padding`和`border-spacing`结合起来使用，来模拟传统的`cellpadding`和`cellspacing`的效果，你可以这样做：

```css
table {
  border-collapse: separate;
  border-spacing: 5px;
}

td, th {
  padding: 10px;
}
```

在这个例子中，表格单元格之间有5px的间距（类似`cellspacing`），并且每个单元格内容与其边界之间有10px的内边距（类似`cellpadding`）。

**基本**

要控制 CSS 中的“cellpadding”，您可以简单地`padding`在表格单元格上使用。例如，对于 10px 的“cellpadding”：

    td { 
        padding: 10px;
    }
    

对于“cellspacing”，您可以将`border-spacing`CSS 属性应用于您的表格。例如，对于 10px 的“cellspacing”：

    table { 
        border-spacing: 10px;
        border-collapse: separate;
    }
    

此属性甚至允许单独的水平和垂直间距，这是老式“单元格间距”无法做到的。

**IE ≤ 7 中的问题**

这适用于几乎所有流行的浏览器，但 Internet Explorer 到 Internet Explorer 7 除外，在 Internet Explorer 7 中您几乎不走运。我说“几乎”是因为这些浏览器仍然支持该`border-collapse`属性，该属性合并相邻表格单元格的边框。如果您尝试消除单元格间距（即`cellspacing="0"`），那么`border-collapse:collapse`应该具有相同的效果：表格单元格之间没有空格。不过，这种支持存在缺陷，因为它不会覆盖`cellspacing`表元素上现有的 HTML 属性。

简而言之：对于非 Internet Explorer 5-7 浏览器，`border-spacing`可以满足您的需求。对于 Internet Explorer，如果您的情况正好（您想要 0 单元格间距并且您的表格尚未定义它），您可以使用`border-collapse:collapse`.

    table { 
        border-spacing: 0;
        border-collapse: collapse;
    }
    

注意：有关可应用于表以及适用于哪些浏览器的 CSS 属性的详细概述，请参阅这个[精彩的 Quirksmode 页面](http://www.quirksmode.org/css/tables.html)。

默认
--

浏览器的默认行为相当于：

    table {border-collapse: collapse;}
    td    {padding: 0px;}
    

         ![在此输入图像描述](https://i.stack.imgur.com/cukle.png)

细胞填充
----

设置细胞内容物和细胞壁之间的空间量

    table {border-collapse: collapse;}
    td    {padding: 6px;}
    

        ![在此输入图像描述](https://i.stack.imgur.com/c0ght.png)

细胞间距
----

控制表格单元格之间的空间

    table {border-spacing: 2px;}
    td    {padding: 0px;}
    

        ![在此输入图像描述](https://i.stack.imgur.com/WNuBP.png)

两个都
---

    table {border-spacing: 2px;}
    td    {padding: 6px;}
    

        ![在此输入图像描述](https://i.stack.imgur.com/eyZQl.png)

两者（特殊）
------

    table {border-spacing: 8px 2px;}
    td    {padding: 6px;}
    

        ![在此输入图像描述](https://i.stack.imgur.com/gbJ3T.png)

> **注：**如果有`border-spacing`设置，则表明`border-collapse`该表的属性为`separate`。

[自己尝试一下吧！](http://jsfiddle.net/H4emK/3303/)

[在这里](http://www.htmlcodetutorial.com/tables/index_famsupp_29.html)您可以找到实现此目的的旧 HTML 方法。

table
    {
        border-collapse: collapse; /* 'cellspacing' equivalent */
    }
    
    table td, table th
    {
        padding: 0; /* 'cellpadding' equivalent */
    }

据我所知，在表格单元格上设置边距实际上没有任何效果。真正的 CSS 等效项`cellspacing`是`border-spacing`\- 但它在 Internet Explorer 中不起作用。

`border-collapse: collapse`如前所述，您可以使用可靠地将单元格间距设置为 0，但对于任何其他值，我认为唯一的跨浏览器方法是继续使用该`cellspacing`属性。

此技巧适用于 Internet Explorer 6 及更高版本、[Google Chrome](http://en.wikipedia.org/wiki/Google_Chrome)、Firefox 和[Opera](http://en.wikipedia.org/wiki/Opera_%28web_browser%29)：

    table {
        border-collapse: separate;
        border-spacing: 10px; /* cellspacing */
        *border-collapse: expression('separate', cellSpacing = '10px');
    }
    
    table td, table th {
        padding: 10px; /* cellpadding */
    }
    

该`*`声明适用于 Internet Explorer 6 和 7，其他浏览器将正确忽略它。

`expression('separate', cellSpacing = '10px')`返回`'separate'`，但两个语句都会运行，就像在 JavaScript 中一样，您可以传递比预期更多的参数，并且所有参数都将被评估。

CSS 如何设置单元格填充 cellpadding 和单元格间距 cellspacing ？

当您在 Chrome 浏览器中点击按钮时，通常会看到一个蓝色的轮廓或边框出现，这被称为焦点轮廓（focus outline）。这是浏览器默认的可访问性特性，用以帮助用户知道哪个页面元素当前拥有键盘焦点。然而，从视觉设计的角度来看，有时这个默认效果可能与您的网站设计不协调。

要通过自定义 CSS 来移除按钮或其他可聚焦元素上的这个蓝色边框，您可以使用 `outline` 属性并将其设置为 `none`。但是，在去掉这个边框的同时，为了保持可访问性和良好的用户体验，您应该提供一个替代的焦点指示器。这可以通过改变背景色、边框颜色或使用其他视觉效果来实现。

以下是一个简单的例子，展示了如何移除按钮的默认焦点边框，并用另一个样式替代：

```css
button:focus {
  outline: none; /* 移除默认的焦点轮廓 */
  border: 2px solid #FFA500; /* 提供一个明显的焦点指示器，例如橙色边框 */
  box-shadow: 0 0 5px #FFA500; /* 可选，添加额外的阴影效果作为焦点指示 */
}
```

在实现时，我们应当谨慎考虑是否真的需要移除这个焦点轮廓，因为这对于使用键盘导航的用户来说是一个重要的可用性特性。如果决定去除，我们必须确保通过其他方式明确指出元素的焦点状态，以维护网站的无障碍性。

例如，您可能会这样实现一个按钮：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>自定义按钮样式</title>
<style>
button {
  padding: 10px 20px;
  background-color: #1E90FF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 当按钮被聚焦时，改变背景色和边框 */
button:focus {
  outline: none;
  border: 2px solid #FFA500;
  background-color: #187bcd;
}
</style>
</head>
<body>

<button type="button">点击我</button>

</body>
</html>
```

在此例中，当按钮获得焦点时，除了移除默认的蓝色边框之外，按钮的背景色也会变暗，并且会增加一个橙色的边框，以此来区分焦点状态。这确保了即使在去除了默认的焦点轮廓后，用户依然能够通过颜色变化识别哪个元素是当前聚焦的，从而保持良好的用户体验和可访问性。

**不建议**这样做，因为它会降低站点的[可访问性](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility)；有关更多信息，请参阅这篇[文章](https://a11yproject.com/posts/never-remove-css-outlines/)。

也就是说，如果你坚持的话，这个 CSS 应该可以工作：

    button:focus {outline:0;}
    

检查一下或 JSFiddle：[http://jsfiddle.net/u4pXu/](http://jsfiddle.net/u4pXu/)

或者在这个片段中：

    button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
    }
    
    button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
    }
    
    button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
    }
    
    button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
    }
    
    button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
    }
    
    button.change:hover {
    cursor: pointer;
    background-color: #F89900;
    }
    
    button:active {
    outline: none;
    border: none;
    }
    
    button:focus {outline:0;}

    <button class="launch">Launch with these ads</button> 
    <button class="change">Change</button>

运行代码片段隐藏结果

展开片段

**等待！如此丑陋的轮廓是有原因的！**

在删除丑陋的蓝色轮廓之前，您可能需要考虑**可访问性**。默认情况下，蓝色轮廓放置在可聚焦元素上。这样，有辅助功能问题的用户就可以通过按 Tab 键来聚焦该按钮。一些用户不具备使用鼠标的运动技能，必须仅使用键盘（或某些其他输入设备）进行计算机交互。当您删除蓝色轮廓时，不再有视觉指示器指示聚焦的元素。如果要删除蓝色轮廓，则应_将_其替换为按钮已聚焦的另一种视觉指示。

**可能的解决方案：聚焦时使按钮变暗**

对于下面的示例，首先使用以下方法删除了 Chrome 的蓝色轮廓`button:focus { outline:0 !important; }`

以下是正常显示的基本 Bootstrap 按钮： ![正常状态下的 Bootstrap 按钮](https://i.stack.imgur.com/Rj3Pu.png)

以下是获得焦点时的按钮： ![处于聚焦状态的引导程序按钮](https://i.stack.imgur.com/wb0vw.png)

这里是按下按钮时的情况： ![在此输入图像描述](https://i.stack.imgur.com/jInZM.png)

正如您所看到的，按钮在获得焦点时会稍微变暗。就我个人而言，我建议将聚焦按钮设置得更暗，以便按钮的聚焦状态和正常状态之间存在非常明显的差异。

**它不仅仅适用于残疾用户**

让您的网站更易于访问是经常被忽视的事情，但可以帮助您在网站中创造更高效的体验。许多普通用户使用键盘命令来浏览网站，以便将双手放在键盘上。

在我遇到这个问题的例子中，我必须指定`box-shadow: none`

    button:focus {
      outline:none;
      box-shadow: none;
    }

我只是通过选择全部并将大纲：无应用于所有内容，从页面中的所有标签中删除大纲:)

    *:focus {outline:none}
    

正如 bagofcole 提到的，您可能还需要添加 !important，因此样式将如下所示：

    *:focus {outline:none !important}

不要忘记`!important`声明，以获得更好的结果

    button:focus {outline:0 !important;}
    

具有 !important 属性的规则将始终被应用，无论该规则出现在 CSS 文档中的何处。

如何在 chrome 中从 css 自定义样式的按钮中删除蓝色边框

在HTML中，`<hr>` 元素用于表示主题区域中的话题分隔或段落间的断开。在默认情况下，`<hr>` 元素会显示为一个水平线，它的样式可以通过CSS进行定制，包括颜色的修改。

要更改`<hr>`元素的颜色，您可以通过为其设置CSS样式来完成。这里有几种方法可以实现：

### 使用内联样式

您可以直接在`<hr>`标签中使用`style`属性来设置颜色：

```html
<hr style="border: none; height: 2px; background-color: #ff0000;" />
```

在这个例子中，我们设定了`<hr>`的`border`属性为`none`以移除默认的边框样式，`height`设置了线条的粗细，`background-color`设置了颜色为红色（`#ff0000`）。

### 使用内部或外部CSS

您还可以在HTML文档的`<head>`部分用`<style>`标签定义CSS规则，或者在外部的CSS文件中定义，并链接到HTML文档。

#### 内部样式

在HTML文档的`<head>`部分:

```html
<style>
    hr.customHr {
        border: none;
        height: 2px;
        background-color: #ff0000; /* 红色 */
    }
</style>
```

然后在HTML体中应用这个类：

```html
<hr class="customHr" />
```

#### 外部样式

在外部的`.css`文件中:

```css
.customHr {
    border: none;
    height: 2px;
    background-color: #ff0000; /* 红色 */
}
```

在HTML文档中链接这个CSS文件：

```html
<link rel="stylesheet" type="text/css" href="styles.css" />
```

然后在HTML体中应用这个类：

```html
<hr class="customHr" />
```

### 注意事项

- 在最新的HTML和CSS规范中，建议使用`background-color`而不是`border-color`来改变`<hr>`的颜色，因为`<hr>`通常被视为块级元素，其边框颜色可能不会产生预期效果。
- 为了确保兼容性和一致的表现，在改变颜色前先移除或重置`border`属性是个好习惯。

以上就是如何更改`<hr>`元素颜色的几种方法。

我认为如果您的目的是更改标签生成的线条的颜色，您应该使用`border-color`代替。`color``<hr>`

尽管如此，评论中指出，如果更改线条的大小，边框仍将与您在样式中指定的宽度一样宽，并且线条将用默认颜色填充（这不是大多数情况下所需的效果）时间）。因此，在这种情况下，您似乎还需要指定`background-color`（如@Ibu 建议的那样）。

**HTML 5 Boilerplate**项目在其默认样式表中[指定了](https://github.com/h5bp/html5-boilerplate/blob/a7820f12647fdb93b19340391ac4c60de15352ce/dist/css/style.css#L37-L48)以下规则：

    hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
    }
    

SitePoint 最近发表的**一篇题**​​为[“12 个鲜为人知的 CSS 事实”的](http://www.sitepoint.com/12-little-known-css-facts/)文章提到，如果您指定 ，则`<hr>`可以将其设置`border-color`为其父级。`color``hr { border-color: inherit }`

*   `border-color`适用于**Chrome**和**Safari**。
*   `background-color`适用于 Firefox 和 Opera。
*   `color`适用于**IE7+**。

我认为这很有用。这是简单的 CSS 选择器。

    hr { background-color: red; height: 1px; border: 0; }

    <hr>

运行代码片段Hide results

展开片段

hr {
        height: 1px;
        color: #123455;
        background-color: #123455;
        border: none;
    }
    

通过这种方式，您可以根据需要更改高度。祝你好运。资料来源：[如何使用 CSS 设计 HR 样式](https://www.alexanderonlinemedia.com/how-to-style-with-css/)

在 Firefox、Opera、Internet Explorer、Chrome 和 Safari 中进行了测试。

    hr {
        border-top: 1px solid red;
    }
    

[参见小提琴](http://jsfiddle.net/HPSjU/)。

CSS 如何更改 hr 元素的颜色

在JavaScript中，可以使用`Element.classList`属性来检查一个元素是否包含某个class类。`classList`是一个只读属性，返回元素的类属性的实时`DOMTokenList`集合。其中的`contains()`方法可以用来检查集合中是否包含指定的类值。如果包含返回`true`，否则返回`false`。

以下是使用`classList.contains()`方法检查元素是否包含特定class的例子：

```javascript
// 假设有一个元素 <div id="myDiv" class="foo bar baz"></div>
var elem = document.getElementById('myDiv');

// 检查元素是否包含class 'foo'
if (elem.classList.contains('foo')) {
  console.log('元素包含class "foo"');
} else {
  console.log('元素不包含class "foo"');
}

// 检查元素是否包含class 'no-such-class'
if (elem.classList.contains('no-such-class')) {
  console.log('元素包含class "no-such-class"');
} else {
  console.log('元素不包含class "no-such-class"');
}
```

在上面的代码中，我们首先通过`document.getElementById`获取了ID为`myDiv`的DOM元素，然后使用`classList.contains`方法来检查该元素是否包含特定的class。根据这个方法的返回值，我们可以做出相应的处理或反馈。

使用方法：[`element.classList`](https://developer.mozilla.org/en-US/docs/DOM/element.classList) `.contains`

    element.classList.contains(class);
    

这适用于所有当前的浏览器，并且也有腻子可以支持旧版浏览器。

* * *

**或者**，如果您使用较旧的浏览器并且不想使用polyfills来修复它们，那么使用[`indexOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)是正确的，但您必须稍微调整一下：

    function hasClass(element, className) {
        return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
    }
    

`true`否则，如果您正在查找的类是另一个类名称的一部分，您也会得到。

[**演示版**](http://jsfiddle.net/fkling/zBKCC/)

jQuery 使用类似（如果不相同）的方法。

* * *

**应用于示例：**

由于这不能与 switch 语句一起使用，因此您可以使用以下代码达到相同的效果：

    var test = document.getElementById("test"),
        classes = ['class1', 'class2', 'class3', 'class4'];
    
    test.innerHTML = "";
    
    for(var i = 0, j = classes.length; i < j; i++) {
        if(hasClass(test, classes[i])) {
            test.innerHTML = "I have " + classes[i];
            break;
        }
    }
    

它也更少冗余;)

简单有效的解决方案是尝试**.contains**方法。

    test.classList.contains(testClass);

在现代浏览器中，您可以使用以下`contains`方法[**`Element.classList`**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)：

    testElement.classList.contains(className)
    

* * *

### 演示

    var testElement = document.getElementById('test');
    
    console.log({
        'main' : testElement.classList.contains('main'),
        'cont' : testElement.classList.contains('cont'),
        'content' : testElement.classList.contains('content'),
        'main-cont' : testElement.classList.contains('main-cont'),
        'main-content' : testElement.classList.contains('main-content'),
        'main main-content' : testElement.classList.contains('main main-content')
    });

    <div id="test" class="main main-content content"></div>

运行代码片段Hide results

展开片段

* * *

### 支持的浏览器

[![在此输入图像描述](https://i.stack.imgur.com/3c8x9.png)](https://i.stack.imgur.com/3c8x9.png)

（来自[**CanIUse.com**](http://caniuse.com/#feat=classlist)）

* * *

### 聚合物填料

如果您想使用[**`Element.classList`**](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)但也想支持旧版浏览器，请考虑使用[**Eli Gray**](https://stackoverflow.com/users/78436/eli-grey)的[**这个 polyfill**](https://github.com/eligrey/classList.js)。[](https://stackoverflow.com/users/78436/eli-grey)

这个问题得到了相当扎实的回答`element.classList.contains()`，但人们的答案相当夸张，并提出了一些大胆的主张，[所以我运行了一个基准测试](https://jsben.ch/U3CpX)。

**请记住，每个测试都会进行 1000 次迭代，因此大多数测试仍然非常快。除非您在特定操作中广泛依赖于此，否则您不会看到性能差异。**

我用基本上所有的方法进行了一些测试。在我的机器上（Win 10、24gb、i7-8700），classList.contains 表现得非常好。 className.split(' ') 也是如此，实际上是相同的。

不过，获胜者是`classList.contains()`.如果您不检查 classList 是否为`undefined`，`~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ')`则会提前 5-15%

[![在此输入图像描述](https://i.stack.imgur.com/8kWMd.png)](https://i.stack.imgur.com/8kWMd.png)

### Element.matches()

_元素.matches(selectorString)_

根据[MDN 网络文档](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)：

> 该**`Element.matches()`**方法返回`true`该元素是否由指定的选择器字符串选择；否则，返回`false`。

因此，您可以使用它[`Element.matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)来确定元素是否包含类。

    const element = document.querySelector('#example');
    
    console.log(element.matches('.foo')); // true

    <div id="example" class="foo bar"></div>

运行代码片段Hide results

展开片段

[查看浏览器兼容性](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility)

JS 如何检查元素是否包含某个 class 类？

要在 CSS 中将文本长度限制为 n 行，一种常见的做法是使用 `line-clamp` 特性，但需要注意的是，`line-clamp` 是一个现代浏览器支持的非标准特性，属于 CSS Overflow Module的一部分。这种方法的好处是它允许文本在达到指定的行数限制后显示省略号（...），这样可以向用户清晰地表明文本已被截断。

假设我们想将一个段落的文本限制为3行，我们可以使用以下 CSS 代码：

```css
p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

在这个例子中，先设置 `display: -webkit-box` 启用弹性盒子布局；接着，使用 `-webkit-line-clamp: 3` 来定义文本行数的最大限制为3行；然后，设置 `-webkit-box-orient: vertical` 让内容垂直展开；最后，设置 `overflow: hidden` 与 `text-overflow: ellipsis` 来确保超出部分被隐藏，并且在内容末尾显示省略号。

我在实际项目中曾使用过这种方法，以确保新闻摘要或用户评论在不同设备上具有一致的外观并且不会占用太多空间。这样的处理提升了页面布局的整洁性并改善了用户体验。不过，需要注意的是 `-webkit-line-clamp` 主要在基于 WebKit/Blink 的浏览器上工作（比如 Chrome、Safari），尽管如今大多数现代浏览器都支持这一特性，但在使用时仍需考虑向后兼容性。

可以使用非官方的[line-clamp](https://caniuse.com/#search=line-clamp)语法来完成此操作，并且从 Firefox 68 开始，它适用于所有主要浏览器。

```css
body {
   margin: 20px;
}

.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
```

除非你关心IE用户，否则没有必要使用 `line-height`和 `max-height`来实现需求。

您可以执行以下操作：

    .max-lines {
      display: block;/* or inline-block */
      text-overflow: ellipsis;
      word-wrap: break-word;
      overflow: hidden;
      max-height: 3.6em;
      line-height: 1.8em;
    }

    <p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

运行代码片段隐藏结果

展开片段

其中`max-height:`\= `line-height:`×`<number-of-lines>`中`em`.

**有效的跨浏览器解决方案**

这个问题多年来一直困扰着我们大家。

为了在所有情况下提供帮助，我列出了仅 CSS 方法，以及 jQuery 方法，以防 css 警告出现问题。

这是我提出的一个**仅 CSS 的解决方案，它适用于所有情况，但有一些小注意事项。**

基础很简单，它隐藏跨度的溢出，并根据 Eugene Xa 的建议根据行高设置最大高度。

然后在包含 div 后面有一个伪类，可以很好地放置省略号。

**注意事项**

此解决方案将始终放置省略号，无论是否需要它。

如果最后一行以结束句结尾，您将得到四个点......

您需要对合理的文本对齐感到满意。

省略号将位于文本的右侧，这可能看起来很草率。

**代码+片段**

[jsfiddle](https://jsfiddle.net/asimovwasright/hbahar95/)

```
.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>
```

运行代码片段隐藏结果

展开片段

**jQuery 方法**

我认为这是最好的解决方案，但并不是每个人都可以使用 JS。基本上，jQuery 将检查任何 .text 元素，如果字符数多于预设的最大变量，它将截断其余部分并添加省略号。

这种方法没有任何警告，但是这个代码示例只是为了演示基本思想 - 我不会在生产中使用它而不对其进行改进，原因有两个：

1）它将重写.text elems的内部html。无论需要与否。 2）它没有测试来检查内部 html 是否没有嵌套元素 - 所以你非常依赖作者正确使用 .text 。

已编辑
------

**感谢您的关注@markzzz**

**代码和片段**

[jsfiddle](http://jsfiddle.net/asimovwasright/o82opadm/)

```
setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 
```

展开片段

以下 CSS 类将文本限制为两行，并插入省略号以指示溢出的文本。

```
.two-line-ellipsis {
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="two-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ex sit amet diam efficitur pellentesque. Mauris posuere scelerisque libero, nec pretium mauris molestie non. Nulla aliquam sollicitudin egestas. Fusce aliquet elit vitae mi volutpat vehicula.
  Vestibulum vel sapien enim. Nulla eu volutpat ex, ac faucibus urna. Etiam mattis rutrum ullamcorper. Ut sagittis, erat sit amet vulputate commodo, nisl lacus aliquet magna, vel condimentum ante felis rutrum nibh. Suspendisse ut lorem rutrum, molestie
  velit eget, hendrerit lorem. Vivamus rutrum nunc elit, nec lacinia risus viverra ut.</div>
```

据我所知，这只有使用才有可能，即使如此，最终`height: (some em value); overflow: hidden`也不会有什么花哨的。`...`

如果这不是一个选项，我认为没有一些服务器端预处理（很困难，因为文本流不可能可靠地预测）或 jQuery（可能但可能很复杂），这是不可能的。

使用 css 将文本长度限制为 n 行

要实现背景色透明而文字不透明的效果，我们可以使用 CSS 的 `rgba` 颜色值来设置背景色。`rgba` 方法接受四个参数：红色、绿色、蓝色和透明度(alpha)，其中透明度是一个介于 0（完全透明）和 1（完全不透明）之间的值。

这里有一个简单的例子：

```css
.transparent-background {
  /* 设置文字颜色为不透明的黑色 */
  color: #000000; 
  /* 设置背景色为半透明的白色 */
  background-color: rgba(255, 255, 255, 0.5);
}
```

在上述 CSS 类中，文字颜色使用了十六进制颜色值，这意味着文字是不透明的。背景颜色则使用了 `rgba` 颜色值，其中 alpha 值设置为 0.5，这意味着背景色是半透明的。这样，我们就可以得到一个半透明的背景，同时保持文字内容的不透明性。

HTML 元素使用这个类如下：

```html
<div class="transparent-background">
  这段文字的背景是半透明的，但文字本身是不透明的。
</div>
```

使用这种方法，无论你将背景设置成什么颜色，文字本身的透明度都不会受到影响。

听起来你想使用透明背景，在这种情况下你可以尝试使用该[`rgba()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba())功能：

> ### `rgba(R, G, B, A)`
> 
> R（红色）、G（绿色）和 B（蓝色）可以是`<integer>`s 或`<percentage>`s，其中数字 255 对应于 100%。 A (alpha) 可以是`<number>`0 到 1 之间的 a，或者 a `<percentage>`，其中数字 1 对应于 100%（完全不透明度）。
> 
> ### RGBa 示例
> 
>     background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
>     background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
>     background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
>     background: rgba(51, 170, 51,  1)    /* full opaque green */ 
>     

一个小[例子](http://jsfiddle.net/swQx2/)展示了如何`rgba`使用。

截至 2018 年，几乎[**每个浏览器都支持该`rgba`语法**](https://caniuse.com/#feat=css3-colors)。

最简单的方法是使用 2 个 div，其中 1 个带有背景，1 个带有文本：

    #container {
      position: relative;
      width: 300px;
      height: 200px;
    }
    #block {
      background: #CCC;
      filter: alpha(opacity=60);
      /* IE */
      -moz-opacity: 0.6;
      /* Mozilla */
      opacity: 0.6;
      /* CSS3 */
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    #text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    <div id="container">
      <div id="block"></div>
      <div id="text">Test</div>
    </div>

运行代码片段隐藏结果

展开片段

**仅适用于[较少](http://lesscss.org)用户：**

如果您不喜欢使用 RGBA 而是使用 HEX 设置颜色，有一些解决方案。

你可以使用像这样的 mixin：

    .transparentBackgroundColorMixin(@alpha,@color) {
      background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
    }
    

并像这样使用它：

    .myClass {
        .transparentBackgroundColorMixin(0.6,#FFFFFF);
    }
    

实际上，这是[内置的 Less 函数](http://lesscss.org/functions/#color-operations-fade)也提供的：

    .myClass {
        background-color: fade(#FFFFFF, 50%);
    }
    

请参阅_[如何使用 Less 编译器将十六进制颜色转换为 rgba？](https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler)_

我有同样的问题。我想要 100% 透明的背景色。只需使用此代码即可；这对我来说非常有用：

    rgba(54, 25, 25, .00004);
    

[您可以在该网页的左侧](http://www.chi-renovation.com)（联系表单区域）看到示例。

我的技巧是创建一个透明的 .png 颜色并使用`background:url()`。

CSS 如何将不透明度仅设置为背景色而不对上面的文字生效？

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

This answer is useful

754

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

This is a very interesting question. I've always put my CSS `<link href="...">`s before my JavaScript `<script src="...">`s because "I read one time that it's better." So, you're right; it's high time we do some actual research!

I set up my own test harness in [Node.js](https://en.wikipedia.org/wiki/Node.js) (code below). Basically, I:

*   Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.
*   To simulate reality, I included jQuery and the [H5BP](http://html5boilerplate.com/) CSS (so there's a decent amount of script/CSS to parse)
*   Set up two pages - one with CSS before script, one with CSS after script.
*   Recorded how long it took for the external script in the **`<head>`** to execute
*   Recorded how long it took for the inline script in the **`<body>`** to execute, which is analogous to `DOMReady`.
*   Delayed sending CSS and/or script to the browser by 500 ms.
*   Ran the test 20 times in the three major browsers.

Results
=======

First, with the CSS file delayed by 500 ms (the unit is milliseconds):

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

Next, I set jQuery to delay by 500 ms instead of the CSS:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

Finally, I set **both** jQuery and the CSS to delay by 500 ms:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

Conclusions
===========

First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`). There are various arguments regarding why you might link to your scripts in the `<head>` versus the end of the document, but that's outside the scope of this answer. This is strictly about whether `<script>`s should go before `<link>`s in the `<head>`.

**In modern DESKTOP browsers,** it looks like linking to CSS first **never** provides a performance gain. Putting CSS after script gets you a trivial amount of gain when both CSS and script are delayed, but gives you large gains when CSS is delayed. (Shown by the `last` columns in the first set of results.)

Given that linking to CSS last does not seem to hurt performance but _can_ provide gains under certain circumstances, **you should link to external style sheets _after_ you link to external scripts _only on desktop browsers_** if the performance of old browsers is not a concern. **Read on for the mobile situation.**

Why?
====

Historically, when a browser encountered a `<script>` tag pointing to an external resource, the browser would **stop** parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a `<link>` for an external style sheet, it would _continue_ parsing the HTML while it fetched the CSS file (in parallel).

Hence, the widely-repeated advice to put style sheets first – they would download first, and the first script to download could be loaded in parallel.

However, modern browsers (including all of the browsers I tested with above) have implemented [_speculative parsing_](https://www.google.com/search?q=speculative+parsing), where the browser "looks ahead" in the HTML and begins downloading resources _before_ scripts download and execute.

In old browsers without speculative parsing, putting scripts first will affect performance since they will not download in parallel.

Browser Support
---------------

Speculative parsing was first implemented in: (along with the percentage of worldwide desktop browser users using this version or greater as of Jan 2012)

*   Chrome 1 ([WebKit](https://en.wikipedia.org/wiki/WebKit) 525) (100%)
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   Firefox 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [Opera](https://en.wikipedia.org/wiki/Opera_%28web_browser%29) 11.60 (85%)

In total, roughly 85% of desktop browsers in use today support speculative loading. Putting scripts before CSS will have a performance penalty on 15% of users _globally_; your mileage may vary based on your site's specific audience. (And remember that number is shrinking.)

On mobile browsers, it's a little harder to get definitive numbers simply due to how heterogeneous the mobile browser and OS landscape is. Since speculative rendering was implemented in WebKit 525 (released Mar 2008), and just about every worthwhile mobile browser is based on WebKit, we can conclude that "most" mobile browsers _should_ support it. According to [quirksmode](http://www.quirksmode.org/webkit.html), iOS 2.2/Android 1.0 use WebKit 525. I have no idea what Windows Phone looks like.

**However,** I ran the test on my Android 4 device, and while I saw numbers similar to the desktop results, I hooked it up to the fantastic new [remote debugger](http://code.google.com/chrome/mobile/docs/debugging.html) in Chrome for Android, and _Network_ tab showed that the browser was actually waiting to download the CSS until the JavaScript code completely loaded – in other words, **even the newest version of WebKit for Android does not appear to support speculative parsing.** I suspect it might be turned off due to the CPU, memory, and/or network constraints inherent to mobile devices.

Code
====

Forgive the sloppiness – this was Q&D.

### File _app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### File _css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### File _js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### File _test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery) was [jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[Share](/a/9272730/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9272730/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:40](/posts/9272730/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 6:37

[

![josh3736's user avatar](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[josh3736](/users/201952/josh3736)josh3736

141k3333 gold badges220220 silver badges268268 bronze badges

9

*   146
    
    this is a fantastic answer, thanks for [using the science!](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/) Per your result **"in modern browsers, it looks like linking to CSS first never provides a performance gain"**, I think the answer to the question title is _yes_, the old advice of CSS first is clearly invalid.
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 reputation")
    
    [Feb 14, 2012 at 7:54](#comment11690017_9272730)
    
*   Regarding @josh3736's update about the inverse on mobile... this is a case in point to not to jump the gun on this significant change. I'd be curious how other mobile browser behave (webkit, gecko, presto, trident, etc.) as performance in mobile is often more important.
    
    – [scunliffe](/users/6144/scunliffe "62,886 reputation")
    
    [Feb 14, 2012 at 19:17](#comment11704299_9272730)
    
*   1
    
    You should also try adding some slowness to printing out the css/js, to simulate speeds of a slow server.
    
    – [kirb](/users/709376/kirb "2,031 reputation")
    
    [Feb 14, 2012 at 21:19](#comment11706774_9272730)
    
*   How about if you use defer or async? Does that change? (try with inline scripts and without inline scripts) Does that change?
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 18:28](#comment19384658_9272730)
    
*   1
    
    _"First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`)."_ I would highlight that **much** earlier in the answer, like at the top. Including a `script` in `head` that refers to an external file is almost never correct, from almost any perspective (certainly not a performance one). I don't recall ever having had to do it in real life. The odd line or two of _inline_ script maybe, but that's all. The default, without **very** good contrary reasons, should be the end of the body.
    
    – [T.J. Crowder](/users/157247/t-j-crowder "1,049,803 reputation")
    
    [Dec 12, 2018 at 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **4** more comments](# "Expand to show all comments on this post")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

There are two main reasons to put CSS before JavaScript.

1.  Old browsers (Internet Explorer 6-7, Firefox 2, etc.) would block all subsequent downloads when they started downloading a script. So if you have `a.js` followed by `b.css` they get downloaded sequentially: first a then b. If you have `b.css` followed by `a.js` they get downloaded in parallel so the page loads more quickly.
    
2.  Nothing is rendered until all stylesheets are downloaded - this is true in all browsers. Scripts are different - they block rendering of all DOM elements that are _below the script tag_ in the page. If you put your scripts in the HEAD then it means the entire page is blocked from rendering until all stylesheets and all scripts are downloaded. While it makes sense to block all rendering for stylesheets (so you get the correct styling the first time and avoid the flash of unstyled content FOUC), it doesn't make sense to block rendering of the entire page for scripts. Often scripts don't affect any DOM elements or just a portion of DOM elements. **It's best to load scripts as low in the page as possible, or even better load them asynchronously.**
    

It's fun to create examples with [Cuzillion](http://cuzillion.com/). For example, [this page](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f) has a script in the HEAD so the entire page is blank until it's done downloading. However, if we move the script to the end of the BODY block the page header renders since those DOM elements occur above the SCRIPT tag, as you can see on [this page](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f).

[Share](/a/9272629/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9272629/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Feb 15, 2012 at 7:06](/posts/9272629/revisions "show all edits to this post")

[

![Jeff Atwood's user avatar](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[Jeff Atwood](/users/1/jeff-atwood)

63.6k4848 gold badges150150 silver badges153153 bronze badges

answered Feb 14, 2012 at 6:27

[

![Steve Souders's user avatar](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[Steve Souders](/users/1208454/steve-souders)Steve Souders

1,89711 gold badge1010 silver badges33 bronze badges

7

*   12
    
    Honored Steve beat me to the answer, but I'll add an article relevant to what he mentions: [stevesouders.com/blog/2009/04/27/…](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [Juan Pablo Buritica](/users/970182/juan-pablo-buritica "507 reputation")
    
    [Feb 14, 2012 at 6:31](#comment11689096_9272629)
    
*   4
    
    see which browsers support the `async` attribute, which Steve is recommending here when he says "even better load them asynchronously" -- [stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "which browsers support script async async")
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 reputation")
    
    [Feb 14, 2012 at 6:42](#comment11689152_9272629)
    
*   Hey can you tell me why anyone would link CSS files with `@import` directives?
    
    – [Josh Stodola](/users/54420/josh-stodola "81,965 reputation")
    
    [Feb 14, 2012 at 6:42](#comment11689160_9272629)
    
*   7
    
    What's the source for 2), and if it's true, can you then explain why on occasion a page will finish loading the content, then the CSS is applied a second or two later? (This has happened, rarely, on my own pages where the CSS was in the <head> tags)
    
    – [Izkata](/users/500202/izkata "9,097 reputation")
    
    [Feb 14, 2012 at 14:59](#comment11698302_9272629)
    
*   2
    
    So we should put `jQuery` + `jQuery UI` + `$(document).ready(function () { });` at the end of the page? Will it **always** work as expected?
    
    – [Olivier Pons](/users/106140/olivier-pons "15,553 reputation")
    
    [Feb 16, 2012 at 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "Expand to show all comments on this post")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

I would not emphasize too much on the results that you have got. I believe that it is subjective, but I have a reason to explain you that it is better to put in CSS before JavaScript.

During the loading of your website, there are two scenarios that you would see:

_**Case 1**_: white screen → unstyled website → styled website → interaction → styled and interactive website

_**Case 2**_: white screen → unstyled website → interaction → styled website → styled and interactive website

I honestly can't imagine anyone choosing Case 2. This would mean that visitors using slow Internet connections will be faced with an unstyled website, that allows them to interact with it using JavaScript (since that is already loaded). Furthermore, the amount of time spend looking at an unstyled website would be maximized this way. Why would anyone want that?

It also works better, as [jQuery states](http://api.jquery.com/ready/):

> "When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts".

When the files are loaded in the wrong order (first JavaScript, then CSS), any JavaScript code relying on properties set in CSS files (for example, the width or height of a _div_) won't be loaded correctly. It seems that with the wrong loading order, the correct properties are 'sometimes' known to JavaScript (perhaps this is caused by a race condition?). This effect seems bigger or smaller depending on the browser used.

[Share](/a/9273445/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9273445/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 19:31](/posts/9273445/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 7:55

[

![defau1t's user avatar](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[defau1t](/users/724764/defau1t)defau1t

10.6k22 gold badges3535 silver badges4747 bronze badges

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "267 reputation")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 reputation")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.")  | [](# "Expand to show all comments on this post")

This answer is useful

30

This answer is not useful

Save this answer.

[](/posts/9271660/timeline)

Show activity on this post.

Were your tests performed on your personal computer, or on a web server? It is a blank page, or is it a complex online system with images, databases, etc.? Are your scripts performing a simple hover event action, or are they a core component to how your website renders and interacts with the user? There are several things to consider here, and the relevance of these recommendations almost always become rules when you venture into high-caliber web development.

**The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal _progressive rendering_,** which is critical to the user experience.

All else aside: assuming your test is valid, and you really are producing results contrary to the popular rules, it'd come as no surprise, really. Every website (and everything it takes to make the whole thing appear on a user's screen) is different and the Internet is constantly evolving.

[Share](/a/9271660/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9271660/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Feb 14, 2012 at 6:54](/posts/9271660/revisions "show all edits to this post")

community wiki

  

[11 revs  
](/posts/9271660/revisions "show revision history for this post")[sunday](/users/1152633)

2

*   1
    
    I appreciate the point you are making in bold, but the OP is talking about what happens when you vary the order with _both_ at the top, neither at the bottom.
    
    – [nnnnnn](/users/615754/nnnnnn "148,470 reputation")
    
    [Feb 14, 2012 at 5:35](#comment11688395_9271660)
    
*   1
    
    Thus, "assuming \[his\] test is valid."
    
    – [skippr](/users/1152633/skippr "2,656 reputation")
    
    [Feb 14, 2012 at 5:40](#comment11688458_9271660)
    

[Add a comment](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.")  | [](# "Expand to show all comments on this post")

This answer is useful

24

This answer is not useful

Save this answer.

[](/posts/9277745/timeline)

Show activity on this post.

I include CSS files before JavaScript for a different reason.

If my JavaScript code needs to do dynamic sizing of some page element (for those corner cases where CSS is really a main in the back) then loading the CSS after the JS is russing can lead to race conditions, where the element is resized before CSS styles are applied and thus looks weird when the styles finally kick in. If I load the CSS beforehand I can guarantee that things run in the intended order and that the final layout is what I want it to be.

[Share](/a/9277745/21149756 "Short permalink to this answer")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9277745/edit "Revise and improve this post")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:43](/posts/9277745/revisions "show all edits to this post")

[

![Peter Mortensen's user avatar](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 13:31

[

![hugomg's user avatar](https://i.stack.imgur.com/nmOPo.png?s=64&g=1)

](/users/90511/hugomg)

[hugomg](/users/90511/hugomg)hugomg

68.9k2525 gold badges161161 silver badges247247 bronze badges

7

*   3
    
    this will break one day on some browser. I am not guessing.
    
    – [jcolebrand](/users/109749/jcolebrand "15,929 reputation")
    
    [Feb 15, 2012 at 18:14](#comment11727870_9277745)
    
*   1
    
    jcolebrand: Yes, I think I hadn't drunk enough coffee when I wrote this. (In retrospect, I guess the important things are just to avoid dynamic loading of CSS and putting the JS inside a domReady event if you need to do dynamic sizing)
    
    – [hugomg](/users/90511/hugomg "68,896 reputation")
    
    [Feb 15, 2012 at 18:25](#comment11728107_9277745)
    
*   Scripts should should not change any display. That's the CSS job. HTML = content, CSS = How to display content, javascript change content dynamically. Also js should only act after (or while) the DOMContentLoaded is fired with some little but very specific situations.
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 18:36](#comment19384766_9277745)
    
*   @brunoais: Some layouts can only be created with Javascript though. For example, anything that needs to be dynamically resized must be made via Javascript and some things (like having a size be 100% - 20px) need Javascript to be done portably in old browsers.
    
    – [hugomg](/users/90511/hugomg "68,896 reputation")
    
    [Dec 25, 2012 at 21:04](#comment19386568_9277745)
    
*   @missingno In those cases, just use the DOMContentLoaded event, anyway. But I understand what you mean. (Stupid IE!)
    
    – [brunoais](/users/551625/brunoais "6,448 reputation")
    
    [Dec 25, 2012 at 21:10](#comment19386623_9277745)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "Expand to show all comments on this post")

This answer is useful

第754章

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

这是一个非常有趣的问题。我总是把 CSS`<link href="...">`放在 JavaScript 之前，`<script src="...">`因为“我曾经读到过它更好”。所以，你是对的；现在是我们进行一些实际研究的时候了！

[我在Node.js](https://en.wikipedia.org/wiki/Node.js)中设置了自己的测试工具（代码如下）。基本上，我：

*   确保没有 HTTP 缓存，因此浏览器每次加载页面时都必须执行完整下载。
*   为了模拟现实，我添加了 jQuery 和[H5BP](http://html5boilerplate.com/) CSS（因此需要解析大量的脚本/CSS）
*   设置两个页面 - 一个在脚本之前使用 CSS，另一个在脚本之后使用 CSS。
*   **`<head>`**记录外部脚本执行的时间
*   记录了 中的内联脚本执行的时间**`<body>`**，类似于`DOMReady`.
*   将 CSS 和/或脚本发送到浏览器的时间延迟了 500 毫秒。
*   在三大主流浏览器中运行测试20次。

结果
==

首先，CSS文件延迟500毫秒（单位是毫秒）：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

接下来，我将 jQuery 设置为延迟 500 毫秒，而不是 CSS：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

最后，我将jQuery 和 CSS**都设置为延迟 500 毫秒：**

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

结论
==

首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的 中（而不是位于 的末尾`<body>`）。关于为什么您可以在`<head>`文档末尾链接到脚本有各种争论，但这超出了本答案的范围。这严格来说是关于s 中`<script>`s 是否应该位于`<link>`s之前`<head>`。

**在现代桌面浏览器中，**看起来首先链接到 CSS**永远不会**带来性能提升。当 CSS 和脚本都延迟时，将 CSS 放在脚本后面会给你带来微不足道的收益，但当 CSS 延迟时会给你带来很大的收益。 （由`last`第一组结果中的列显示。）

鉴于最后链接到 CSS 似乎不会损害性能，但在某些情况下_可以_提供增益，因此如果不关心旧浏览器的性能， 则应**_仅在桌面浏览器上_****链接到外部脚本****_后_****链接到外部样式表。****请继续阅读移动设备的情况。**

为什么？
====

从历史上看，当浏览器遇到`<script>`指向外部资源的标签时，浏览器将**停止**解析 HTML，检索脚本，执行它，然后继续解析 HTML。相反，如果浏览器遇到`<link>`外部样式表，它将在获取 CSS 文件的同时_继续_解析 HTML（并行）。

因此，广泛重复的建议是首先放置样式表——首先下载它们，并且可以并行加载第一个下载的脚本。

然而，现代浏览器（包括我上面测试的所有浏览器）已经实现了[_推测性解析_](https://www.google.com/search?q=speculative+parsing)，其中浏览器在 HTML 中“向前看”并在脚本下载和执行_之前开始下载资源。_

在没有推测性解析的旧浏览器中，将脚本放在第一位会影响性能，因为它们不会并行下载。

浏览器支持
-----

推测性解析首次实现于：（以及截至 2012 年 1 月使用此版本或更高版本的全球桌面浏览器用户的百分比）

*   Chrome 1（[WebKit](https://en.wikipedia.org/wiki/WebKit) 525）（100%）
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   火狐 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [歌剧](https://en.wikipedia.org/wiki/Opera_%28web_browser%29)11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[分享](/a/9272730/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9272730/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 17:40](/posts/9272730/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于 2012 年 2 月 14 日 6:37

[

![josh3736 的用户头像](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[乔什3736](/users/201952/josh3736)josh3736

141k3333枚金色徽章220220枚银质徽章268268枚青铜徽章

9

*   146
    
    这是一个很棒的答案，感谢您[使用科学！](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/)根据你的结果**“在现代浏览器中，看起来首先链接到 CSS 永远不会提供性能增益”**，我认为问题标题的答案是_肯定的_，CSS 首先的旧建议显然是无效的。
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 7:54](#comment11690017_9272730)
    
*   关于 @josh3736 关于移动设备上的逆的更新...这是一个很好的例子，不要在这个重大变化上操之过急。我很好奇其他移动浏览器的行为（webkit、gecko、presto、trident 等），因为移动设备的性能通常更重要。
    
    – [斯肯利夫](/users/6144/scunliffe "62,886 声誉")
    
    [2012 年 2 月 14 日 19:17](#comment11704299_9272730)
    
*   1
    
    您还应该尝试添加一些慢速来打印 css/js，以模拟慢速服务器的速度。
    
    – [柯布](/users/709376/kirb "2,031 声望")
    
    [2012 年 2 月 14 日 21:19](#comment11706774_9272730)
    
*   如果使用 defer 或 async 怎么样？这会改变吗？ （尝试使用内联脚本和不使用内联脚本）这会改变吗？
    
    – [布鲁诺埃](/users/551625/brunoais "6,448 声望")
    
    [2012 年 12 月 25 日 18:28](#comment19384658_9272730)
    
*   1
    
    _“首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的末尾（而不是末尾`<body>`）。”_我会在答案的较早部分强调这一点**，**例如在顶部。从几乎任何角度（当然不是性能角度）来看，包含引用外部文件的`script`in几乎从来都不正确。`head`我不记得在现实生活中曾经必须这样做过。_内联_脚本可能有一两行奇数，但仅此而已。如果没有**很好**的相反理由，默认值应该是正文的结尾。
    
    – [TJ·克劳德](/users/157247/t-j-crowder "1,049,803 声誉")
    
    [2018 年 12 月 12 日 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**4**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

[分享](/a/9272629/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[编辑](/posts/9272629/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[2012 年 2 月 15 日 7:06编辑](/posts/9272629/revisions "显示对此帖子的所有编辑")

[

![杰夫·阿特伍德的用户头像](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[杰夫·阿特伍德](/users/1/jeff-atwood)

63.6k4848枚金色徽章150150 枚银质徽章153153枚青铜徽章

回复于 2012 年 2 月 14 日 6:27

[

![Steve Souders 的用户头像](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[史蒂夫·苏德斯](/users/1208454/steve-souders)Steve Souders

1,89711 个金色徽章1010 枚银色徽章33枚青铜徽章

7

*   12
    
    尊敬的史蒂夫比我先找到了答案，但我将添加一篇与他提到的内容相关的文章：[stevesouders.com/blog/2009/04/27 /...](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [胡安·巴勃罗·布里蒂卡](/users/970182/juan-pablo-buritica "第507章 声望")
    
    [2012 年 2 月 14 日 6:31](#comment11689096_9272629)
    
*   4
    
    查看哪些浏览器支持该`async`属性，史蒂夫在这里推荐“更好地异步加载它们” [——stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "哪些浏览器支持异步脚本")
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 6:42](#comment11689152_9272629)
    
*   嘿，你能告诉我为什么有人会用指令链接 CSS 文件吗`@import`？
    
    – [乔什·斯托多拉](/users/54420/josh-stodola "81,965 声誉")
    
    [2012 年 2 月 14 日 6:42](#comment11689160_9272629)
    
*   7
    
    2) 的来源是什么，如果是真的，您能否解释一下为什么有时页面会完成内容加载，然后一两秒后应用 CSS？ （这种情况很少发生在我自己的页面上，CSS 位于 <head> 标签中）
    
    – [伊兹方](/users/500202/izkata "9,097 声誉")
    
    [2012 年 2 月 14 日 14:59](#comment11698302_9272629)
    
*   2
    
    那么我们应该把`jQuery`++放在页面`jQuery UI`的`$(document).ready(function () { });`末尾吗？它**总是**会按预期工作吗？
    
    – [奥利维尔·庞斯](/users/106140/olivier-pons "15,553 声望")
    
    [2012 年 2 月 16 日 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**2**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

我不会过多强调你所得到的结果。我相信这是主观的，但我有理由向你解释，最好在 JavaScript 之前放入 CSS。

在加载网站期间，您会看到两种情况：

_**案例1**_：白屏→无样式网站→有样式的网站→交互→有样式的交互式网站

_**案例2**_：白屏→无样式网站→交互→有样式的网站→有样式和交互式的网站

老实说，我无法想象有人会选择案例 2。这意味着使用慢速 Internet 连接的访问​​者将面临一个无样式的网站，该网站允许他们使用 JavaScript 与其进行交互（因为该网站已加载）。此外，通过这种方式，花在浏览无样式网站上的时间将会最大化。为什么有人想要那个？

[正如jQuery 所说](http://api.jquery.com/ready/)，它也能更好地工作：

> “当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要”。

当文件以错误的顺序加载时（首先是 JavaScript，然后是 CSS），任何依赖于 CSS 文件中设置的属性（例如 div 的宽度或高度_）_的 JavaScript 代码都将无法正确加载。看起来，如果加载顺序错误，JavaScript“有时”会知道正确的属性（也许这是由竞争条件引起的？）。根据所使用的浏览器，这种效果似乎更大或更小。

[分享](/a/9273445/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9273445/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 19:31](/posts/9273445/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于2012 年 2 月 14 日 7:55

[

![defau1t的用户头像](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[默认值](/users/724764/defau1t)defau1t

10.6k22 个金色徽章3535 枚银质徽章4747枚青铜徽章

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "第267章 声誉")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 声望")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

This answer is useful

30

This answer is not useful

Save this answer.

[](/posts/9271660/timeline)

Show activity on this post.

Were your tests performed on your personal computer, or on a web server? It is a blank page, or is it a complex online system with images, databases, etc.? Are your scripts performing a simple hover event action, or are they a core component to how your website renders and interacts with the user? There are several things to consider here, and the relevance of these recommendations almost always become rules when you venture into high-caliber web development.

**The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal _progressive rendering_,** which is critical to the user experience.

All else aside: assuming your test is valid, and you really are producing results contrary to the popular rules, it'd come as no surprise, really. Every website (and everything it takes to make the whole thing appear on a user's screen) is different and the Internet is constantly evolving.

[Share](/a/9271660/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[Edit](/posts/9271660/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Feb 14, 2012 at 6:54](/posts/9271660/revisions "显示对此帖子的所有编辑")

community wiki

  

[11 revs  
](/posts/9271660/revisions "显示此帖子的修订历史记录")[sunday](/users/1152633)

2

*   1
    
    I appreciate the point you are making in bold, but the OP is talking about what happens when you vary the order with _both_ at the top, neither at the bottom.
    
    – [nnnnnn](/users/615754/nnnnnn "148,470 声望")
    
    [Feb 14, 2012 at 5:35](#comment11688395_9271660)
    
*   1
    
    Thus, "assuming \[his\] test is valid."
    
    – [skippr](/users/1152633/skippr "2,656 声望")
    
    [Feb 14, 2012 at 5:40](#comment11688458_9271660)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

This answer is useful

24

This answer is not useful

Save this answer.

[](/posts/9277745/timeline)

Show activity on this post.

I include CSS files before JavaScript for a different reason.

If my JavaScript code needs to do dynamic sizing of some page element (for those corner cases where CSS is really a main in the back) then loading the CSS after the JS is russing can lead to race conditions, where the element is resized before CSS styles are applied and thus looks weird when the styles finally kick in. If I load the CSS beforehand I can guarantee that things run in the intended order and that the final layout is what I want it to be.

[Share](/a/9277745/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9277745/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 17:43](/posts/9277745/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 13:31

[

![Hugomg 的用户头像](https://i.stack.imgur.com/nmOPo.png?s=64&g=1)

](/users/90511/hugomg)

[hugomg](/users/90511/hugomg)hugomg

68.9k2525 gold badges161161 silver badges247247 bronze badges

7

*   3
    
    this will break one day on some browser. I am not guessing.
    
    – [jcolebrand](/users/109749/jcolebrand "15,929 声望")
    
    [Feb 15, 2012 at 18:14](#comment11727870_9277745)
    
*   1
    
    jcolebrand: Yes, I think I hadn't drunk enough coffee when I wrote this. (In retrospect, I guess the important things are just to avoid dynamic loading of CSS and putting the JS inside a domReady event if you need to do dynamic sizing)
    
    – [hugomg](/users/90511/hugomg "68,896 声望")
    
    [Feb 15, 2012 at 18:25](#comment11728107_9277745)
    
*   Scripts should should not change any display. That's the CSS job. HTML = content, CSS = How to display content, javascript change content dynamically. Also js should only act after (or while) the DOMContentLoaded is fired with some little but very specific situations.
    
    – [brunoais](/users/551625/brunoais "6,448 声望")
    
    [Dec 25, 2012 at 18:36](#comment19384766_9277745)
    
*   @brunoais: Some layouts can only be created with Javascript though. For example, anything that needs to be dynamically resized must be made via Javascript and some things (like having a size be 100% - 20px) need Javascript to be done portably in old browsers.
    
    – [hugomg](/users/90511/hugomg "68,896 声望")
    
    [Dec 25, 2012 at 21:04](#comment19386568_9277745)
    
*   @missingno In those cases, just use the DOMContentLoaded event, anyway. But I understand what you mean. (Stupid IE!)
    
    – [brunoais](/users/551625/brunoais "6,448 声望")
    
    [Dec 25, 2012 at 21:10](#comment19386623_9277745)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "展开以显示此帖子的所有评论")

This answer is useful

754

This answer is not useful

Save this answer.

[](/posts/9272730/timeline)

Show activity on this post.

This is a very interesting question. I've always put my CSS `<link href="...">`s before my JavaScript `<script src="...">`s because "I read one time that it's better." So, you're right; it's high time we do some actual research!

I set up my own test harness in [Node.js](https://en.wikipedia.org/wiki/Node.js) (code below). Basically, I:

*   Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.
*   To simulate reality, I included jQuery and the [H5BP](http://html5boilerplate.com/) CSS (so there's a decent amount of script/CSS to parse)
*   Set up two pages - one with CSS before script, one with CSS after script.
*   Recorded how long it took for the external script in the **`<head>`** to execute
*   Recorded how long it took for the inline script in the **`<body>`** to execute, which is analogous to `DOMReady`.
*   Delayed sending CSS and/or script to the browser by 500 ms.
*   Ran the test 20 times in the three major browsers.

Results
=======

First, with the CSS file delayed by 500 ms (the unit is milliseconds):

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

Next, I set jQuery to delay by 500 ms instead of the CSS:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

Finally, I set **both** jQuery and the CSS to delay by 500 ms:

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

Conclusions
===========

First, it's important to note that I'm operating under the assumption that you have scripts located in the `<head>` of your document (as opposed to the end of the `<body>`). There are various arguments regarding why you might link to your scripts in the `<head>` versus the end of the document, but that's outside the scope of this answer. This is strictly about whether `<script>`s should go before `<link>`s in the `<head>`.

**In modern DESKTOP browsers,** it looks like linking to CSS first **never** provides a performance gain. Putting CSS after script gets you a trivial amount of gain when both CSS and script are delayed, but gives you large gains when CSS is delayed. (Shown by the `last` columns in the first set of results.)

Given that linking to CSS last does not seem to hurt performance but _can_ provide gains under certain circumstances, **you should link to external style sheets _after_ you link to external scripts _only on desktop browsers_** if the performance of old browsers is not a concern. **Read on for the mobile situation.**

Why?
====

Historically, when a browser encountered a `<script>` tag pointing to an external resource, the browser would **stop** parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a `<link>` for an external style sheet, it would _continue_ parsing the HTML while it fetched the CSS file (in parallel).

Hence, the widely-repeated advice to put style sheets first – they would download first, and the first script to download could be loaded in parallel.

However, modern browsers (including all of the browsers I tested with above) have implemented [_speculative parsing_](https://www.google.com/search?q=speculative+parsing), where the browser "looks ahead" in the HTML and begins downloading resources _before_ scripts download and execute.

In old browsers without speculative parsing, putting scripts first will affect performance since they will not download in parallel.

Browser Support
---------------

Speculative parsing was first implemented in: (along with the percentage of worldwide desktop browser users using this version or greater as of Jan 2012)

*   Chrome 1 ([WebKit](https://en.wikipedia.org/wiki/WebKit) 525) (100%)
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   Firefox 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [Opera](https://en.wikipedia.org/wiki/Opera_%28web_browser%29) 11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

[分享](/a/9272730/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[编辑](/posts/9272730/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[编辑于 2022 年 9 月 3 日 17:40](/posts/9272730/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[彼得·莫滕森](/users/63550/peter-mortensen)

30.9k2222枚金徽章107107 银徽章131131枚青铜徽章

回复于 2012 年 2 月 14 日 6:37

[

![josh3736 的用户头像](https://i.stack.imgur.com/4wIGc.jpg?s=64&g=1)

](/users/201952/josh3736)

[乔什3736](/users/201952/josh3736)josh3736

141k3333枚金色徽章220220枚银质徽章268268枚青铜徽章

9

*   146
    
    这是一个很棒的答案，感谢您[使用科学！](http://blog.stackoverflow.com/2011/12/dont-be-afraid-to-use-the-science/)根据你的结果**“在现代浏览器中，看起来首先链接到 CSS 永远不会提供性能增益”**，我认为问题标题的答案是_肯定的_，CSS 首先的旧建议显然是无效的。
    
    – [杰夫·阿特伍德](/users/1/jeff-atwood "63,618 声誉")
    
    [2012 年 2 月 14 日 7:54](#comment11690017_9272730)
    
*   关于 @josh3736 关于移动设备上的逆的更新...这是一个很好的例子，不要在这个重大变化上操之过急。我很好奇其他移动浏览器的行为（webkit、gecko、presto、trident 等），因为移动设备的性能通常更重要。
    
    – [斯肯利夫](/users/6144/scunliffe "62,886 声誉")
    
    [2012 年 2 月 14 日 19:17](#comment11704299_9272730)
    
*   1
    
    您还应该尝试添加一些慢速来打印 css/js，以模拟慢速服务器的速度。
    
    – [柯布](/users/709376/kirb "2,031 声望")
    
    [2012 年 2 月 14 日 21:19](#comment11706774_9272730)
    
*   如果使用 defer 或 async 怎么样？这会改变吗？ （尝试使用内联脚本和不使用内联脚本）这会改变吗？
    
    – [布鲁诺埃](/users/551625/brunoais "6,448 声望")
    
    [2012 年 12 月 25 日 18:28](#comment19384658_9272730)
    
*   1
    
    _“首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的末尾（而不是末尾`<body>`）。”_我会在答案的较早部分强调这一点**，**例如在顶部。从几乎任何角度（当然不是性能角度）来看，包含引用外部文件的`script`in几乎从来都不正确。`head`我不记得在现实生活中曾经必须这样做过。_内联_脚本可能有一两行奇数，但仅此而已。如果没有**很好**的相反理由，默认值应该是正文的结尾。
    
    – [TJ·克劳德](/users/157247/t-j-crowder "1,049,803 声誉")
    
    [2018 年 12 月 12 日 11:46](#comment94337184_9272730)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [显示另外**4**条评论](# "展开以显示此帖子的所有评论")

This answer is useful

313

This answer is not useful

Save this answer.

[](/posts/9272629/timeline)

Show activity on this post.

将 CSS 放在 JavaScript 之前有两个主要原因。

1.  旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您`a.js`遵循，`b.css`它们将按顺序下载：先是 a，然后是 b。如果您`b.css`遵循，`a.js`它们会并行下载，因此页面加载速度更快。
    
2.  在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。**最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。**
    

[使用Cuzillion](http://cuzillion.com/)创建示例很有趣。例如，[此页面的](http://stevesouders.com/cuzillion/?c0=hj1hfff2_0_f)HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在[此页面](http://stevesouders.com/cuzillion/?c0=bj1hfff2_0_f)上看到的那样。

[分享](/a/9272629/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/ "The current license for this post: CC BY-SA 3.0")

[编辑](/posts/9272629/edit "修改并完善这篇文章")

跟随

Follow this answer to receive notifications

[2012 年 2 月 15 日 7:06编辑](/posts/9272629/revisions "显示对此帖子的所有编辑")

[

![杰夫·阿特伍德的用户头像](https://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=64&d=identicon&r=PG)

](/users/1/jeff-atwood)

[杰夫·阿特伍德](/users/1/jeff-atwood)

63.6k4848枚金色徽章150150 枚银质徽章153153枚青铜徽章

回复于 2012 年 2 月 14 日 6:27

[

![Steve Souders 的用户头像](https://www.gravatar.com/avatar/aabd4fe494747fd05d0bf725bf773c73?s=64&d=identicon&r=PG)

](/users/1208454/steve-souders)

[史蒂夫·苏德斯](/users/1208454/steve-souders)Steve Souders

1,89711 个金色徽章1010 枚银色徽章33枚青铜徽章

7

*   12
    
    尊敬的史蒂夫比我先找到了答案，但我将添加一篇与他提到的内容相关的文章：[stevesouders.com/blog/2009/04/27 /...](http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/)
    
    – [胡安·巴勃罗·布里蒂卡](/users/970182/juan-pablo-buritica "第507章 声望")
    
    [2012 年 2 月 14 日 6:31](#comment11689096_9272629)
    
*   4
    
    see which browsers support the `async` attribute, which Steve is recommending here when he says "even better load them asynchronously" -- [stackoverflow.com/questions/1834077/…](http://stackoverflow.com/questions/1834077/which-browsers-support-script-async-async "哪些浏览器支持异步脚本")
    
    – [Jeff Atwood](/users/1/jeff-atwood "63,618 声誉")
    
    [Feb 14, 2012 at 6:42](#comment11689152_9272629)
    
*   Hey can you tell me why anyone would link CSS files with `@import` directives?
    
    – [Josh Stodola](/users/54420/josh-stodola "81,965 声誉")
    
    [Feb 14, 2012 at 6:42](#comment11689160_9272629)
    
*   7
    
    What's the source for 2), and if it's true, can you then explain why on occasion a page will finish loading the content, then the CSS is applied a second or two later? (This has happened, rarely, on my own pages where the CSS was in the <head> tags)
    
    – [Izkata](/users/500202/izkata "9,097 声誉")
    
    [Feb 14, 2012 at 14:59](#comment11698302_9272629)
    
*   2
    
    So we should put `jQuery` + `jQuery UI` + `$(document).ready(function () { });` at the end of the page? Will it **always** work as expected?
    
    – [Olivier Pons](/users/106140/olivier-pons "15,553 声望")
    
    [Feb 16, 2012 at 9:06](#comment11741180_9272629)
    

[](# "Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”.") |  [Show **2** more comments](# "展开以显示此帖子的所有评论")

This answer is useful

48

This answer is not useful

Save this answer.

[](/posts/9273445/timeline)

Show activity on this post.

I would not emphasize too much on the results that you have got. I believe that it is subjective, but I have a reason to explain you that it is better to put in CSS before JavaScript.

During the loading of your website, there are two scenarios that you would see:

_**Case 1**_: white screen → unstyled website → styled website → interaction → styled and interactive website

_**Case 2**_: white screen → unstyled website → interaction → styled website → styled and interactive website

I honestly can't imagine anyone choosing Case 2. This would mean that visitors using slow Internet connections will be faced with an unstyled website, that allows them to interact with it using JavaScript (since that is already loaded). Furthermore, the amount of time spend looking at an unstyled website would be maximized this way. Why would anyone want that?

It also works better, as [jQuery states](http://api.jquery.com/ready/):

> "When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts".

When the files are loaded in the wrong order (first JavaScript, then CSS), any JavaScript code relying on properties set in CSS files (for example, the width or height of a _div_) won't be loaded correctly. It seems that with the wrong loading order, the correct properties are 'sometimes' known to JavaScript (perhaps this is caused by a race condition?). This effect seems bigger or smaller depending on the browser used.

[Share](/a/9273445/21149756 "此答案的简短永久链接")

Share a link to this answer (Includes your user id)

Copy link[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/ "The current license for this post: CC BY-SA 4.0")

[Edit](/posts/9273445/edit "修改并完善这篇文章")

Follow

Follow this answer to receive notifications

[edited Sep 3, 2022 at 19:31](/posts/9273445/revisions "显示对此帖子的所有编辑")

[

![彼得·莫滕森的用户头像](https://i.stack.imgur.com/RIZKi.png?s=64&g=1)

](/users/63550/peter-mortensen)

[Peter Mortensen](/users/63550/peter-mortensen)

30.9k2222 gold badges107107 silver badges131131 bronze badges

answered Feb 14, 2012 at 7:55

[

![defau1t的用户头像](https://www.gravatar.com/avatar/a1d5dd07adb7418d1ac99e250942f70c?s=64&d=identicon&r=PG)

](/users/724764/defau1t)

[defau1t](/users/724764/defau1t)defau1t

10.6k22 gold badges3535 silver badges4747 bronze badges

2

*   2
    
    How would you go about guaranteeing all the css was loaded before the javascript executes? Can you? or should your javascript be robust enough to deal with the situation where the styles might not necessarily be loaded.
    
    – [Jonnio](/users/219341/jonnio "第267章 声誉")
    
    [Feb 15, 2012 at 12:13](#comment11719439_9273445)
    
*   @Jonnio If your JS has a dependency, then you should make that dependency explicit. Otherwise, you will always have rare timing issues. ES6 modules are a good way to make that happen, but there are many libraries that could be used as well.
    
    – [kmkemp](/users/725957/kmkemp "1,656 声望")
    
    [Nov 9, 2018 at 19:24](#comment93351088_9273445)
    

[Add a comment](# "使用评论来询问更多信息或提出改进建议。避免发表“+1”或“谢谢”之类的评论。")  | [](# "Expand to show all comments on this post")

这是一个非常有趣的问题。我总是把 CSS`<link href="...">`放在 JavaScript 之前，`<script src="...">`因为“我曾经读到过它更好”。所以，你是对的；现在是我们进行一些实际研究的时候了！

[我在Node.js](https://en.wikipedia.org/wiki/Node.js)中设置了自己的测试工具（代码如下）。基本上，我：

*   确保没有 HTTP 缓存，因此浏览器每次加载页面时都必须执行完整下载。
*   为了模拟现实，我添加了 jQuery 和[H5BP](http://html5boilerplate.com/) CSS（因此需要解析大量的脚本/CSS）
*   设置两个页面 - 一个在脚本之前使用 CSS，另一个在脚本之后使用 CSS。
*   **`<head>`**记录外部脚本执行的时间
*   记录了 中的内联脚本执行的时间**`<body>`**，类似于`DOMReady`.
*   将 CSS 和/或脚本发送到浏览器的时间延迟了 500 毫秒。
*   在三大主流浏览器中运行测试20次。

结果
==

首先，CSS文件延迟500毫秒（单位是毫秒）：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 583    36    | 559    42    | 565   49
    St Dev      |  15    12    |   9     7    |  13    6
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 584    521   | 559    513   | 565   519
    St Dev      |  15      9   |   9      5   |  13     7
    

接下来，我将 jQuery 设置为延迟 500 毫秒，而不是 CSS：

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 597    556   | 562    559   | 564   564
    St Dev      |  14     12   |  11      7   |   8     8
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 598    557   | 563    560   | 564   565
    St Dev      |  14     12   |  10      7   |   8     8
    

最后，我将jQuery 和 CSS**都设置为延迟 500 毫秒：**

         Browser: Chrome 18    | IE 9         | Firefox 9
             CSS: first  last  | first  last  | first last
    =======================================================
    Header Exec |              |              |
    Average     | 620    560   | 577    577   | 571   567
    St Dev      |  16     11   |  19      9   |   9    10
    ------------|--------------|--------------|------------
    Body Exec   |              |              |
    Average     | 623    561   | 578    580   | 571   568
    St Dev      |  18     11   |  19      9   |   9    10
    

结论
==

首先，需要注意的是，我的操作假设您的脚本位于`<head>`文档的 中（而不是位于 的末尾`<body>`）。关于为什么您可以在`<head>`文档末尾链接到脚本有各种争论，但这超出了本答案的范围。这严格来说是关于s 中`<script>`s 是否应该位于`<link>`s之前`<head>`。

**在现代桌面浏览器中，**看起来首先链接到 CSS**永远不会**带来性能提升。当 CSS 和脚本都延迟时，将 CSS 放在脚本后面会给你带来微不足道的收益，但当 CSS 延迟时会给你带来很大的收益。 （由`last`第一组结果中的列显示。）

鉴于最后链接到 CSS 似乎不会损害性能，但在某些情况下_可以_提供增益，因此如果不关心旧浏览器的性能， 则应**_仅在桌面浏览器上_****链接到外部脚本****_后_****链接到外部样式表。****请继续阅读移动设备的情况。**

为什么？
====

从历史上看，当浏览器遇到`<script>`指向外部资源的标签时，浏览器将**停止**解析 HTML，检索脚本，执行它，然后继续解析 HTML。相反，如果浏览器遇到`<link>`外部样式表，它将在获取 CSS 文件的同时_继续_解析 HTML（并行）。

因此，广泛重复的建议是首先放置样式表——首先下载它们，并且可以并行加载第一个下载的脚本。

然而，现代浏览器（包括我上面测试的所有浏览器）已经实现了[_推测性解析_](https://www.google.com/search?q=speculative+parsing)，其中浏览器在 HTML 中“向前看”并在脚本下载和执行_之前开始下载资源。_

在没有推测性解析的旧浏览器中，将脚本放在第一位会影响性能，因为它们不会并行下载。

浏览器支持
-----

推测性解析首次实现于：（以及截至 2012 年 1 月使用此版本或更高版本的全球桌面浏览器用户的百分比）

*   Chrome 1（[WebKit](https://en.wikipedia.org/wiki/WebKit) 525）（100%）
*   [Internet Explorer 8](https://en.wikipedia.org/wiki/Internet_Explorer_8) (75%)
*   火狐 3.5 (96%)
*   [Safari](https://en.wikipedia.org/wiki/Safari_%28web_browser%29) 4 (99%)
*   [歌剧](https://en.wikipedia.org/wiki/Opera_%28web_browser%29)11.60 (85%)

目前使用的桌面浏览器总共大约有 85% 支持推测加载。将脚本放在 CSS 之前会给_全球_15% 的用户带来性能损失；您的里程可能会根据您网站的特定受众而有所不同。 （请记住，这个数字正在减少。）

在移动浏览器上，由于移动浏览器和操作系统环境的异构性，获得明确的数字有点困难。由于推测渲染是在 WebKit 525（2008 年 3 月发布）中实现的，并且几乎所有有价值的移动浏览器都基于 WebKit，因此我们可以得出结论，“大多数”移动浏览器_应该_支持它。根据[quirksmode 的说法](http://www.quirksmode.org/webkit.html)，iOS 2.2/Android 1.0 使用 WebKit 525。我不知道 Windows Phone 是什么样子。

**然而，**我在 Android 4 设备上运行了测试，虽然我看到的数字与桌面结果类似，但我将其连接到Android 版 Chrome 中出色的新[远程调试器，](http://code.google.com/chrome/mobile/docs/debugging.html) _“网络”_选项卡显示浏览器实际上正在等待下载CSS 直到 JavaScript 代码完全加载 - 换句话说，**即使是 Android 版 WebKit 的最新版本似乎也不支持推测性解析。** 我怀疑它可能由于移动设备固有的 CPU、内存和/或网络限制而被关闭。

代码
==

请原谅我的草率——这是 Q&D。

### 文件_app.js_

    var express = require('express')
    , app = express.createServer()
    , fs = require('fs');
    
    app.listen(90);
    
    var file={};
    fs.readdirSync('.').forEach(function(f) {
        console.log(f)
        file[f] = fs.readFileSync(f);
        if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {
            res.contentType(f);
            res.send(file[f]);
        });
    });
    
    
    app.get('/jquery.js', function(req,res) {
        setTimeout(function() {
            res.contentType('text/javascript');
            res.send(file['jquery.js']);
        }, 500);
    });
    
    app.get('/style.css', function(req,res) {
        setTimeout(function() {
            res.contentType('text/css');
            res.send(file['style.css']);
        }, 500);
    });
    
    
    var headresults={
        css: [],
        js: []
    }, bodyresults={
        css: [],
        js: []
    }
    app.post('/result/:type/:time/:exec', function(req,res) {
        headresults[req.params.type].push(parseInt(req.params.time, 10));
        bodyresults[req.params.type].push(parseInt(req.params.exec, 10));
        res.end();
    });
    
    app.get('/result/:type', function(req,res) {
        var o = '';
        headresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        o+='\n';
        bodyresults[req.params.type].forEach(function(i) {
            o+='\n' + i;
        });
        res.send(o);
    });
    

### 文件_css.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <link rel="stylesheet" href="style.css">
            <script src="jquery.js"></script>
            <script src="test.js"></script>
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_js.html_

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS first</title>
            <script>var start = Date.now();</script>
            <script src="jquery.js"></script>
            <script src="test.js"></script>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <script>document.write(jsload - start);bodyexec=Date.now()</script>
        </body>
    </html>
    

### 文件_test.js_

    var jsload = Date.now();
    
    
    $(function() {
        $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));
    });
    

[jQuery](https://en.wikipedia.org/wiki/JQuery)是[jquery-1.7.1.min.js](http://code.jquery.com/jquery-1.7.1.min.js)

我不会过多强调你所得到的结果。我相信这是主观的，但我有理由向你解释，最好在 JavaScript 之前放入 CSS。

在加载网站期间，您会看到两种情况：

_**案例1**_：白屏→无样式网站→有样式的网站→交互→有样式的交互式网站

_**案例2**_：白屏→无样式网站→交互→有样式的网站→有样式和交互式的网站

老实说，我无法想象有人会选择案例 2。这意味着使用慢速 Internet 连接的访问​​者将面临一个无样式的网站，该网站允许他们使用 JavaScript 与其进行交互（因为该网站已加载）。此外，通过这种方式，花在浏览无样式网站上的时间将会最大化。为什么有人想要那个？

[正如jQuery 所说](http://api.jquery.com/ready/)，它也能更好地工作：

> “当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要”。

当文件以错误的顺序加载时（首先是 JavaScript，然后是 CSS），任何依赖于 CSS 文件中设置的属性（例如 div 的宽度或高度_）_的 JavaScript 代码都将无法正确加载。看起来，如果加载顺序错误，JavaScript“有时”会知道正确的属性（也许这是由竞争条件引起的？）。根据所使用的浏览器，这种效果似乎更大或更小。

您的测试是在您的个人计算机上还是在网络服务器上进行的？它是一个空白页面，还是一个包含图像、数据库等的复杂在线系统？您的脚本是执行简单的悬停事件操作，还是您的网站如何呈现并与用户交互的核心组件？这里有几件事需要考虑，当您冒险进行高水平的 Web 开发时，这些建议的相关性几乎总是成为规则。

**“将样式表放在顶部，将脚本放在底部”规则的目的是，一般来说，这是实现最佳_渐进式渲染的_最佳方式，**这对用户体验至关重要。

抛开其他一切不谈：假设您的测试是有效的，并且您确实产生了与流行规则相反的结果，那么这并不奇怪，真的。每个网站（以及使整个内容出现在用户屏幕上所需的一切）都是不同的，并且互联网在不断发展。

我出于不同的原因在 JavaScript 之前包含 CSS 文件。

如果我的 JavaScript 代码需要动态调整某些页面元素的大小（对于那些 CSS 在后面确实是主要元素的极端情况），那么在 JS 调用之后加载 CSS 可能会导致竞争条件，即元素在 CSS 之前调整大小应用了样式，因此当样式最终启动时看起来很奇怪。如果我事先加载 CSS，我可以保证事情按预期顺序运行，并且最终布局就是我想要的。

在大多数情况下，将CSS放在JavaScript之前确实有几个明显的好处，主要是关于页面加载性能和用户体验方面的考虑。

### 1. **改善渲染性能**

加载CSS之前的优先级是因为浏览器在解析HTML并构建DOM（文档对象模型）的同时，会并行下载CSS文件，并构建CSSOM（CSS对象模型）。一旦CSSOM和DOM都准备好了，浏览器将它们结合起来渲染页面。如果CSS加载被推迟，或者在JavaScript文件之后加载，浏览器可能无法立即渲染页面，因为它没有完成CSSOM的构建。这会导致页面显示不完整或者布局闪烁，影响用户体验。

例如，在实际项目中，如果CSS延迟加载，用户可能会看到未经样式处理的HTML内容（也称为FOUC——无样式内容的闪烁），直到CSS文件被加载和解析后，页面才会正常显示。

### 2. **JavaScript操作CSS**

另一个理由是，JavaScript经常会操作DOM并依赖于特定的CSS完成布局和功能。如果CSS在JavaScript之后加载，那么JavaScript在执行时可能无法正确查询或应用样式，因为相应的CSS规则还未就绪。

例如，如果一个JavaScript脚本试图动态调整元素的大小或位置，但相应的CSS尚未加载，脚本可能无法正确执行，因为它依赖的样式尚未应用于元素上。

### 3. **例外情况**

尽管通常建议先加载CSS，但在某些情况下，可能需要优先加载JavaScript。例如，当JavaScript用于加载关键内容或功能时（如动态内容生成或提前获取数据），可能需要优先加载JavaScript。在这种情况下，开发者需要确保JavaScript的执行不会对页面渲染造成不良影响。

### 总结

总的来说，将CSS置于JavaScript之前可以优化页面渲染过程，减少页面内容闪烁，确保JavaScript能正确操作已经应用样式的DOM元素。这种做法符合Web性能优化的最佳实践。但也有例外，需要根据具体需求和场景特定地调整资源加载顺序。

Web项目中引入CSS 应该总是在 javascript 文件之前吗？

CSS Flexbox 是一个用于在页面上布局元素的强大工具，它提供了一系列的属性用来对齐和分布容器内的子元素。在 Flexbox 中，关于元素的对齐，我们主要使用以下属性：

- `justify-content`: 用来对齐一个容器内的子元素们（flex items）沿着主轴（main axis）的。
- `align-items`: 用来对齐一个容器内的子元素们沿着交叉轴（cross axis）。
- `align-self`: 允许单个子元素有不同于容器的 `align-items` 属性的对齐方式。

在 CSS Grid 布局中，有 `justify-items` 和 `justify-self` 属性，它们分别用来对齐网格项目（grid items）在网格区域内沿着行轴的对齐方式（即主轴对齐），以及允许单个网格项有不同于网格容器的 `justify-items` 属性设定的对齐方式。

而在 Flexbox 中，没有 `justify-items` 和 `justify-self` 这样的属性，原因有以下几点：

1. **主轴对齐通过 `justify-content` 控制**：在 Flexbox 中，主轴（横向或纵向）的对齐是通过 `justify-content` 属性来控制的，它影响整个容器内所有子元素的对齐方式。这意味着所有子元素作为一个整体在主轴方向上的间距和分布。

2. **单个子元素在主轴上的控制**：如果想要单独控制某个子元素在主轴上的位置，可以使用 `margin` 属性（如 `margin-left`, `margin-right`, `margin-top`, `margin-bottom` 或简写形式 `margin`），这样可以对单个子元素进行“推”或“拉”的操作来改变它们在主轴上的位置。

3. **交叉轴对齐**：对于交叉轴，Flexbox 提供了 `align-items` 来控制所有子元素的默认对齐方式，同时也提供了 `align-self` 来允许单个子元素有自己的交叉轴对齐方式，这与 Grid 的 `justify-self` 属性类似，只不过是应用于交叉轴而不是主轴。

因此，在 Flexbox 的设计中，`justify-content`, `align-items`, 和 `align-self` 这三个属性已经足够用来控制子元素在主轴和交叉轴上的对齐和分布。`justify-items` 和 `justify-self` 属性在 Flexbox 上下文中不是必需的，因为已经有其他属性覆盖了它们的功能。而且，Flexbox 主要是为了一维布局设计的，而 Grid 是为了更复杂的二维布局设计的，这也是为什么 Grid 有更详尽的对齐控制属性。

沿主轴对齐 Flex 项目的方法
----------------

正如问题中所述：

> 要沿主轴对齐弹性项目，有一个属性：[`justify-content`](http://www.w3.org/TR/css-flexbox-1/#justify-content-property)
> 
> 要沿横轴对齐 Flex 项目，需要使用三个属性：[`align-content`](http://www.w3.org/TR/css-flexbox-1/#align-content-property)、[`align-items`和`align-self`](http://www.w3.org/TR/css-flexbox-1/#align-items-property)。

接下来的问题是：

> 为什么没有`justify-items`和`justify-self`属性？

一个答案可能是：_因为它们没有必要。_

Flexbox[规范](http://www.w3.org/TR/css-flexbox-1/)提供了_两种_沿主轴对齐 Flex 项目的方法：

1.  关键字`justify-content`属性，以及
2.  [`auto`边距](http://www.w3.org/TR/css-flexbox-1/#auto-margins)

* * *

_证明内容合理_
--------

该[`justify-content`](http://www.w3.org/TR/css-flexbox-1/#justify-content-property)属性沿着 Flex 容器的主轴对齐 Flex 项目。

它应用于 Flex 容器，但仅影响 Flex 项目。

有五个对齐选项：

*   **`flex-start`**~ Flex 商品包装在生产线的开头。
    
    [![在此输入图像描述](https://i.stack.imgur.com/YOzeU.png)](https://i.stack.imgur.com/YOzeU.png)
    
*   **`flex-end`**~ Flex 商品在生产线末端进行包装。
    
    [![在此输入图像描述](https://i.stack.imgur.com/13Z1u.png)](https://i.stack.imgur.com/13Z1u.png)
    
*   **`center`**~ Flex 商品朝生产线的中心方向包装。
    
    [![在此输入图像描述](https://i.stack.imgur.com/oKi7M.png)](https://i.stack.imgur.com/oKi7M.png)
    
*   **`space-between`**~ Flex 项目均匀分布，第一个项目与容器的一个边缘对齐，最后一个项目与相对的边缘对齐。第一项和最后一项使用的边取决于[`flex-direction`](http://www.w3.org/TR/css-flexbox-1/#flex-direction-property)书写[模式](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)（`ltr`或`rtl`）。
    
    [![在此输入图像描述](https://i.stack.imgur.com/0mQqd.png)](https://i.stack.imgur.com/0mQqd.png)
    
*   **`space-around`**~`space-between`与两端相同，但两端有一半大小的空格。
    
    [![在此输入图像描述](https://i.stack.imgur.com/u4BH6.png)](https://i.stack.imgur.com/u4BH6.png)
    

* * *

自动边距
----

通过[`auto`边距](http://www.w3.org/TR/css-flexbox-1/#auto-margins)，弹性项目可以居中、间隔开或打包到子组中。

`justify-content`与应用于 Flex 容器的不同，`auto`边距适用于 Flex 项目。

它们的工作原理是消耗指定方向上的所有可用空间。

* * *

### 将一组弹性项目向右对齐，但第一个项目向左对齐

问题中的场景：

> *   使一组弹性项目右对齐 ( `justify-content: flex-end`) 但第一个项目左对齐 ( `justify-self: flex-start`)
>     
>     _考虑带有一组导航项和徽标的标题部分。徽标 `justify-self`可以向左对齐，而导航项则保持在最右侧，并且整个内容可以平滑地调整（“弯曲”）以适应不同的屏幕尺寸。_
>     

[![在此输入图像描述](https://i.stack.imgur.com/D3Vnv.png)](https://i.stack.imgur.com/D3Vnv.png)

[![在此输入图像描述](https://i.stack.imgur.com/Um8DM.png)](https://i.stack.imgur.com/Um8DM.png)

* * *

**_其他有用的场景：_**

[![在此输入图像描述](https://i.stack.imgur.com/qLzgU.png)](https://i.stack.imgur.com/qLzgU.png)

[![在此输入图像描述](https://i.stack.imgur.com/HtaOc.png)](https://i.stack.imgur.com/HtaOc.png)

[![在此输入图像描述](https://i.stack.imgur.com/M2WkZ.png)](https://i.stack.imgur.com/M2WkZ.png)

* * *

### 在角落放置一个弹性项目

问题中的场景：

> *   将弹性项目放置在角落`.box { align-self: flex-end; justify-self: flex-end; }`

[![在此输入图像描述](https://i.stack.imgur.com/BtbfK.png)](https://i.stack.imgur.com/BtbfK.png)

* * *

### 将弹性项目垂直和水平居中

[![在此输入图像描述](https://i.stack.imgur.com/lV9a0.png)](https://i.stack.imgur.com/lV9a0.png)

`margin: auto``justify-content: center`是and的替代`align-items: center`。

而不是 Flex 容器上的这段代码：

    .container {
        justify-content: center;
        align-items: center;
    }
    

您可以在弹性项目上使用它：

    .box56 {
        margin: auto;
    }
    

[**当将溢出容器的弹性项目居中时，**](https://stackoverflow.com/q/33454533/3597276)此替代方法非常有用。

* * *

### 将一个弹性项目居中，并将第二个弹性项目置于第一个弹性项目和边缘之间

弹性容器通过分配可用空间来对齐弹性项目。

因此，为了创建_相等的平衡_，以便中间的物品可以在容器中居中，旁边有单个物品，必须引入平衡。

在下面的示例中，引入了不可见的第三个弹性项目（框 61 和 68）来平衡“真实”项目（框 63 和 66）。

[![在此输入图像描述](https://i.stack.imgur.com/3IeTy.png)](https://i.stack.imgur.com/3IeTy.png)

[![在此输入图像描述](https://i.stack.imgur.com/BmtRt.png)](https://i.stack.imgur.com/BmtRt.png)

当然，这种方法在语义上并没有什么了不起。

或者，您可以使用伪元素而不是实际的 DOM 元素。或者您可以使用绝对定位。这里涵盖了所有三种方法：**[居中和底部对齐弹性项目](https://stackoverflow.com/q/36191516/3597276)**

_注意：上面的示例仅在真正居中时才有效 - 当最外面的项目具有相同的高度/宽度时。当弹性项目的长度不同时，请参阅下一个示例。_

* * *

### 当相邻项目大小不同时将弹性项目居中

问题中的场景：

> *   在一排三个弹性项目中，将中间项目固定到容器的中心 ( `justify-content: center`)，并将相邻项目与容器边缘对齐 (`justify-self: flex-start`和 `justify-self: flex-end`)。
>     
>     _请注意，如果相邻项目具有不同的宽度，则 value`space-around`和`space-between`on`justify-content`属性不会使中间项目相对于容器居中（[请参阅演示](http://jsfiddle.net/7an37m20/12/)）。_
>     

如前所述，除非所有 Flex 项目的宽度或高度相等（取决于`flex-direction`），否则中间项目无法真正居中。这个问题为属性提供了强有力的理由`justify-self`（当然是为了处理任务而设计的）。

显示代码片段

    #container {
      display: flex;
      justify-content: space-between;
      background-color: lightyellow;
    }
    .box {
      height: 50px;
      width: 75px;
      background-color: springgreen;
    }
    .box1 {
      width: 100px;
    }
    .box3 {
      width: 200px;
    }
    #center {
      text-align: center;
      margin-bottom: 5px;
    }
    #center > span {
      background-color: aqua;
      padding: 2px;
    }

    <div id="center">
      <span>TRUE CENTER</span>
    </div>
    
    <div id="container">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
    </div>
    
    <p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

运行代码片段隐藏结果

展开片段

_解决这个问题有两种方法：_

**_解决方案#1：绝对定位_**

Flexbox 规范允许[Flex 项目的绝对定位](http://www.w3.org/TR/css-flexbox-1/#abspos-items)。这使得中间项目能够完美居中，无论其兄弟项目的大小如何。

请记住，与所有绝对定位的元素一样，这些项目将从[文档流](https://www.w3.org/TR/CSS22/visuren.html#normal-flow)中删除。这意味着它们不占用容器中的空间并且可以与它们的兄弟姐妹重叠。

在下面的示例中，中间项目以绝对定位居中，而外部项目保持流入。但可以以相反的方式实现相同的布局：将中间项目居中`justify-content: center`并绝对定位外部项目。

[![在此输入图像描述](https://i.stack.imgur.com/U1eLb.png)](https://i.stack.imgur.com/U1eLb.png)

**_解决方案#2：嵌套 Flex 容器（无绝对定位）_**

    .container {
      display: flex;
    }
    .box {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .box71 > span { margin-right: auto; }
    .box73 > span { margin-left: auto;  }
    
    /* non-essential */
    .box {
      align-items: center;
      border: 1px solid #ccc;
      background-color: lightgreen;
      height: 40px;
    }

    <div class="container">
      <div class="box box71"><span>71 short</span></div>
      <div class="box box72"><span>72 centered</span></div>
      <div class="box box73"><span>73 loooooooooooooooong</span></div>
    </div>

运行代码片段隐藏结果

展开片段

它的工作原理如下：

*   顶层 div ( `.container`) 是一个 Flex 容器。
*   现在，每个子 div ( `.box`) 都是一个弹性项目。
*   每个`.box`项目都是`flex: 1`为了平均分配容器空间而给出的。
*   现在这些项目占用了行中的所有空间并且宽度相等。
*   将每个项目设为（嵌套）弹性容器并添加`justify-content: center`.
*   现在每个`span`元素都是居中的弹性项目。
*   使用弹性边距左右`auto`移动外部。`span`

您也可以放弃`justify-content`并`auto`专门使用边距。

但`justify-content`可以在这里工作，因为`auto`利润总是优先的。从规格来看：

> [**8.1.与`auto` 边距对齐**](https://www.w3.org/TR/css-flexbox-1/#auto-margins)
> 
> `justify-content`在通过和进行对齐之前`align-self`，任何正可用空间都会分配到该维度中的自动边距。

* * *

### _调整内容：空间相同（概念）_

回到[`justify-content`](https://stackoverflow.com/a/33856609/3597276)一分钟，这里有一个想法，还有一个选择。

*   **`space-same`**`space-between`~和的混合体`space-around`。 Flex 项目均匀间隔（如`space-between`），但两端不是半尺寸空格（如`space-around`），而是两端都有全尺寸空格。

[`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore)这种布局可以通过[`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter)Flex 容器上的伪元素来实现。

[![在此输入图像描述](https://i.stack.imgur.com/Jjw9w.png)](https://i.stack.imgur.com/Jjw9w.png)

_（来源：[@oriol](https://stackoverflow.com/a/34455480/3597276)代码，[@crl](https://stackoverflow.com/users/3183756/crl)标签）_

**更新：**浏览器已经开始实现**`space-evenly`**，它完成了上述任务。有关详细信息，请参阅此帖子：[Flex 项目之间的间距相等](https://stackoverflow.com/q/45134400/3597276)

* * *

[**PLAYGROUND**](http://jsfiddle.net/mz1ft6jx/8/)（包括上述所有示例的代码）

我知道这不是一个答案，但我愿意为此事做出有价值的贡献。如果他们能够发布`justify-self`Flexbox 以使其真正灵活，那就太好了。

我相信，当轴上有多个项目时，最合乎逻辑的`justify-self`行为方式是将自身与其最近的邻居（或边缘）对齐，如下所示。

我真心希望 W3C 能够注意到这一点，并且至少会考虑一下。 =)

[![在此输入图像描述](https://i.stack.imgur.com/wpSsJ.jpg)](https://i.stack.imgur.com/wpSsJ.jpg)

这样，无论左右框的大小如何，您都可以获得真正居中的项目。当其中一个盒子到达中心盒子的位置时，它会简单地推动它，直到没有更多的空间可以分配。

[![在此输入图像描述](https://i.stack.imgur.com/NgobL.gif)](https://i.stack.imgur.com/NgobL.gif)

制作精彩布局的容易程度是无穷无尽的，看看这个“复杂”的例子。

[![在此输入图像描述](https://i.stack.imgur.com/U2ELF.png)](https://i.stack.imgur.com/U2ELF.png)

这是在 www-style 列表上被问到的，Tab Atkins（规范编辑）[提供了一个答案，解释了原因](https://lists.w3.org/Archives/Public/www-style/2015Apr/0114.html)。我将在这里详细说明这一点。

首先，我们首先假设我们的 Flex 容器是单行的 ( `flex-wrap: nowrap`)。在这种情况下，主轴和交叉轴之间明显存在对齐差异 - 主轴上堆叠了多个项目，但交叉轴上仅堆叠了一个项目。因此，在横轴上有一个可定制的每项“自我对齐”是有意义的（因为每个项目都是单独对齐的），而在主轴上则没有意义（因为在那里，项目集体对齐）。

对于多行 Flexbox，相同的逻辑适用于每个“Flex Line”。在给定的行中，项目在交叉轴上单独对齐（因为交叉轴上每行只有一个项目），而不是在主轴上集体对齐。

* * *

这是另一种表达方式：因此，_所有_`*-self`和属性`*-content`都是关于如何在事物周围分配额外空间。但关键的区别在于，`*-self`版本适用于_该轴上只有一个事物的_情况，而`*-content`版本适用于_该轴上可能有很多事物的情况_。一件事与多件事场景是不同类型的问题，因此它们有不同类型的可用选项 - 例如， /`space-around`值`space-between`对于 有意义`*-content`，但对于 则无效`*-self`。

SO：在弹性盒的主轴上，有很多东西可以分配空间。因此，`*-content`财产在那里有意义，但不是`*-self`财产。

相反，在横轴上，我们同时具有 a`*-self`和 a`*-content`属性。一个决定如何在_多条_伸缩线 ( )周围分配空间`align-content`，而另一个 ( `align-self`) 决定如何在给定的伸缩线内，在横轴上的_各个伸缩项目周围分配空间。_

（我`*-items`在这里忽略属性，因为它们只是为 建立默认值`*-self`。）

我刚刚找到了自己的解决方案来解决这个问题，或者至少是我的问题。  
我正在使用`justify-content: space-around`而不是`justify-content: space-between;`.

这样，末端元素将粘在顶部和底部，并且如果需要，您可以拥有自定义边距。

我知道这不使用弹性盒，但对于三个项目（左侧一个，中间一个，右侧一个）的简单用例，可以轻松地`display: grid`在父级、`grid-area: 1/1/1/1;`子级和`justify-self`定位上使用来完成此操作那些孩子们。

    <div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
      <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
      <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
      <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
    </div>

运行代码片段隐藏结果

展开片段

CSS 中为什么 flexbox 没有 justify items 和 justify self 属性？

在SVG（Scalable Vector Graphics）中，更改元素的颜色可以通过几种不同的方法来实现。以下是几种常用的方法：

### 1. 直接在SVG代码中使用`fill`属性更改颜色
你可以直接在SVG元素上使用`fill`属性来指定颜色。例如，如果你有一个矩形，可以这样更改它的颜色：

```xml
<svg width="100" height="100">
  <rect width="100" height="100" fill="blue" />
</svg>
```

将`fill`属性的值从`blue`改为任何其他合法的颜色值，例如`red`、`#FF0000`或`rgb(255,0,0)`。

### 2. 使用CSS更改颜色
SVG元素的颜色也可以通过CSS来控制。你可以将一个类应用于SVG元素，并在CSS中定义该类的样式。例如：

```xml
<svg width="100" height="100">
  <rect width="100" height="100" class="my-rectangle" />
</svg>
```

然后，在CSS中：

```css
.my-rectangle {
  fill: green;
}
```

你可以通过修改对应的CSS类来更改颜色，这使得在不同的状态下更改颜色变得非常灵活。

### 3. 使用JavaScript动态更改颜色
如果你需要在用户交互或是某个事件发生时改变颜色，可以使用JavaScript动态地修改`fill`属性。例如：

```html
<svg width="100" height="100">
  <rect id="my-rectangle" width="100" height="100" fill="yellow" />
</svg>

<script>
  var rect = document.getElementById('my-rectangle');
  rect.addEventListener('click', function() {
    rect.setAttribute('fill', 'purple');
  });
</script>
```

以上代码中，当用户点击这个矩形时，它的颜色会从黄色变为紫色。

### 4. 使用内联样式更改颜色
除了上述方法外，还可以在SVG元素上使用内联样式来直接更改颜色：

```xml
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: orange;" />
</svg>
```

通过更改`style`属性中的`fill`值，你可以改变圆形的颜色。

以上就是一些在SVG中更改元素颜色的方法。当然，实现这些方法时，应该注意所选择的颜色值必须是SVG支持的格式，包括颜色名称、十六进制代码或RGB/RGBA表示法。

[CSS 过滤器适用于所有当前浏览器](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility)

### 更改任何 SVG 颜色

1. 使用标签添加 SVG 图像 `<img>`。

   ```html
   <img src="dotted-arrow.svg" class="filter-green"/>
   ```
2. 要过滤到特定颜色，请使用以下[Codepen（单击此处打开 Codepen）](https://codepen.io/sosuke/pen/Pjoqqp)将十六进制颜色代码转换为 CSS 过滤器：

   例如，输出 `#00EE00`为

   ```css
   filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
   ```
   [在这里](https://isotropic.co/hex-color-to-css-filter) `filter`为任何颜色生成一个。[](https://isotropic.co/hex-color-to-css-filter)
3. 将 CSS 添加 `filter`到此类中。

   ```cs
   .filter-green{
       filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
   }
   ```

要更改任何 SVG 的颜色，您可以通过**在任何文本编辑器中打开 SVG 文件**来直接更改 SVG 代码。该代码可能类似于以下代码：

    <?xml version="1.0" encoding="utf-8"?>
    
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    
        <g>
            <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                     C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    
        /* Some more code goes on */
        </g>
    </svg>
    

您可以观察到有一些 XML 标签，如路径、圆形、多边形等。您可以在 style 属性的帮助下添加自己的颜色。看下面的例子

    <path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    

将 style 属性添加到所有标签中，以便您可以获得所需颜色的 SVG。

根据 Daniel 的评论，我们可以直接使用 fill 属性，而不是在 style 属性中使用 fill 元素。

如果你想动态改变颜色：

1.  在代码编辑器中打开 SVG
    
2.  添加或重写`fill`每个**路径**的属性`fill="currentColor"`
    
3.  现在，该 svg 将采用字体颜色的颜色，因此您可以执行以下操作：
    
        svg {
            color : "red";
        }

您无法以这种方式更改图像的颜色。如果将 SVG 作为图像加载，则无法使用 CSS 或 JavaScript 在浏览器中更改其显示方式。

如果您想更改 SVG 图像，则必须使用 `<object>`或 `<iframe>`使用 `<svg>`内联加载它。

如果您想使用页面中的技术，则需要[Modernizr](https://en.wikipedia.org/wiki/Modernizr)库，您可以在其中检查 SVG 支持并有条件地显示或不显示后备图像。然后，您可以内联 SVG 并应用您需要的样式。

比如下面示例代码   

```
#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
    C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
    C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
    c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
    c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
```

您可以内联 SVG。使用类名 ( `my-svg-alternate`) 标记您的后备图像： 

```
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />
```

在CSS中使用 `no-svg`Modernizr（CDN： http: [//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js](http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js)）中的类来检查SVG支持。如果没有任何 SVG 支持，则 SVG 块将被忽略并显示图像，否则图像将从 DOM 树中删除 ( `display: none`)：

```
.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}
```

然后您可以更改内联元素的颜色：

```
#time-3-icon {
   fill: green;
}
```

**仅具有路径信息的 SVG**。您不能对图像执行此操作...因为您可以更改描边和填充信息的路径，然后就完成了。_像[Adob​​e Illustrator](https://en.wikipedia.org/wiki/Adobe_Illustrator)_

因此，通过 CSS 你可以覆盖路径`fill`值：

    path { fill: orange; }
    

但是，如果您想要一种更灵活的方式，因为您想在发生某些悬停效果时用文本更改它，请使用：

    path { fill: currentColor; }
    

    body {
      background: #ddd;
      text-align: center;
      padding-top: 2em;
    }
    
    .parent {
      width: 320px;
      height: 50px;
      display: block;
      transition: all 0.3s;
      cursor: pointer;
      padding: 12px;
      box-sizing: border-box;
    }
    
    /***  desired colors for children  ***/
    .parent{
      color: #000;
      background: #def;
    }
    .parent:hover{
      color: #fff;
      background: #85c1fc;
    }
    
    .parent span{
      font-size: 18px;
      margin-right: 8px;
      font-weight: bold;
      font-family: 'Helvetica';
      line-height: 26px;
      vertical-align: top;
    }
    .parent svg{
      max-height: 26px;
      width: auto;
      display: inline;
    }
    
    /****  magic trick  *****/
    .parent svg path{
      fill: currentcolor;
    }

    <div class='parent'>
      <span>TEXT WITH SVG</span>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
    <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
    </svg>
    </div>

运行代码片段Hide results

展开片段

如何更改 svg 元素的颜色

`not:first-child` 选择器在CSS中是一个结合了伪类选择器 `:not()` 和 `:first-child` 的用法。它的主要用途是选择那些不是其父元素的第一个子元素的元素。

下面是一个使用 `:not(:first-child)` 选择器的例子：

假设我们有以下HTML结构：

```html
<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>
```

我们希望选中第一个列表项以外的所有列表项，并为它们应用样式。我们可以在CSS中这样做：

```css
li:not(:first-child) {
  color: red;
}
```

这个规则会将第二个和第三个列表项的文本颜色设置为红色，而第一个列表项保持默认的颜色。

使用 `:not(:first-child)` 选择器的好处是我们可以直接指定我们不想选中的元素（在这个例子中是第一个子元素），而不需要分别为其他元素设置样式。这种方法提高了我们的代码的可读性和维护性。

您发布的版本之一[实际上适用](http://jsfiddle.net/5TKjB/)[于](http://caniuse.com/#feat=css-sel3)所有现代浏览器（支持[CSS 选择器级别 3](http://www.w3.org/TR/css3-selectors/)）：[](http://caniuse.com/#feat=css-sel3)

    div ul:not(:first-child) {
        background-color: #900;
    }
    

如果您需要支持旧版浏览器，或者您受到`:not`选择器[限制的](http://www.w3.org/TR/css3-selectors/#negation)阻碍（它只接受[简单的选择器](http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn)作为参数），那么您可以使用另一种技术：

定义一个范围比您想要的范围更大的规则，然后有条件地“撤销”它，将其范围限制为您想要的范围：

    div ul {
        background-color: #900;  /* applies to every ul */
    }
    
    div ul:first-child {
        background-color: transparent; /* limits the scope of the previous rule */
    }
    

限制范围时，请使用您正在设置的每个 CSS 属性的[默认值。](http://www.w3.org/TR/CSS2/colors.html#background-properties)

这个 CSS2 解决方案（“一个`ul`接一个`ul`”）也有效，并且受到更多浏览器的支持。

    div ul + ul {
      background-color: #900;
    }
    

`:not`与和不同`:nth-sibling`，IE7+ 支持[相邻同级选择器。](http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors)

如果您的**JavaScript**在页面加载后更改了这些属性，您应该查看**IE7**和**IE8**实现中的一些已知错误。 [请参阅此链接](http://www.quirksmode.org/css/selectors/)。

对于任何静态网页，这应该可以完美地工作。

由于**IE6-8**`:not`不接受，我建议你这样做：

    div ul:nth-child(n+2) {
        background-color: #900;
    }
    

因此，您选择`ul`其父元素中_除第一个元素之外的_所有元素。

有关更多[示例](http://css-tricks.com/useful-nth-child-recipies/)，请参阅 Chris Coyer 的**[“有用的：nth-​​child Recipes”](http://css-tricks.com/useful-nth-child-recipies/)**文章。`nth-child`[](http://css-tricks.com/useful-nth-child-recipies/)

您可以在“not()”伪类中使用“first-child”伪类。

    div ul:not(:first-child){
        background-color: #900;
    }

    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Classes</title>
    </head>
    <body>
      <div>
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Products</a></li>
        </ul>
        <ul>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
        <ul>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
        </ul>
        <ul>
           <li><a href="#">Facebook</a></li>
           <li><a href="#">Instagram</a></li>
        </ul>
      </div>
    </body>
    </html>

运行代码片段Hide results

展开片段

替代方法，

1.  使用“nth-child()”，它将选择第 n 个孩子。

    div ul:not(:nth-child(1)){
        background-color: #900;
    }

    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Classes</title>
    </head>
    <body>
      <div>
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Products</a></li>
        </ul>
        <ul>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
        <ul>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
        </ul>
        <ul>
           <li><a href="#">Facebook</a></li>
           <li><a href="#">Instagram</a></li>
        </ul>
      </div>
    </body>
    </html>

运行代码片段Hide results

展开片段

2.  使用“nth-of-type()”，它将选择其父元素的第 n 个元素。
    
        div ul:not(:nth-of-type(1)){
            background-color: #900;
        }
    
        <html>
          <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Pseudo Classes</title>
        </head>
        <body>
          <div>
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Products</a></li>
            </ul>
            <ul>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
            <ul>
               <li><a href="#">Services</a></li>
               <li><a href="#">Downloads</a></li>
            </ul>
            <ul>
               <li><a href="#">Facebook</a></li>
               <li><a href="#">Instagram</a></li>
            </ul>
          </div>
        </body>
        </html>
    
    运行代码片段Hide results
    
    展开片段
    
3.  使用“nth-last-child()”，它将选择从最后一个孩子开始计数的第n个孩子。如果有4个“ul”标签，可以这样写。
    

    div ul:not(:nth-last-child(4)){
        background-color: #900;
    }

    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Classes</title>
    </head>
    <body>
      <div>
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Products</a></li>
        </ul>
        <ul>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
        <ul>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
        </ul>
        <ul>
           <li><a href="#">Facebook</a></li>
           <li><a href="#">Instagram</a></li>
        </ul>
      </div>
    </body>
    </html>

运行代码片段Hide results

展开片段

4.  使用“nth-last-of-type()”，它将从最后一个子元素中选择其父元素的第 n 个元素。如果有4个“ul”标签，可以这样写。

    div ul:not(:nth-last-of-type(4)){
        background-color: #900;
    }

    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Classes</title>
    </head>
    <body>
      <div>
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Products</a></li>
        </ul>
        <ul>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
        </ul>
        <ul>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
        </ul>
        <ul>
           <li><a href="#">Facebook</a></li>
           <li><a href="#">Instagram</a></li>
        </ul>
      </div>
    </body>
    </html>

运行代码片段Hide results

展开片段

这些是处理此类情况的一些最佳方法。

`not(:first-child)`似乎不再起作用了。至少在最新版本的 Chrome 和 Firefox 中是这样。

相反，试试这个：

    ul:not(:first-of-type) {}

CSS 如何使用 notfirst 子选择器

如何将CSS应用于iframe？,在HTML中，`iframe` 元素可以用来嵌入另一个HTML页面。一般来说，由于安全和隔离的原因，直接对`iframe`中的内容应用CSS样式是有一定限制的。不过，仍有几种方法可以应用CSS到`iframe`中：

### 1. 同源策略

如果`iframe`加载的页面与父页面属于同一源（即协议、域名和端口都相同），则可以通过JavaScript访问`iframe`的内容并动态添加样式。以下是一个例子：

```javascript
// 获取iframe的contentDocument
var iframeDocument = document.getElementById('my-iframe').contentDocument;

// 向iframe的head中添加样式
var styleElement = iframeDocument.createElement('style');
styleElement.type = 'text/css';
styleElement.innerHTML = 'body { background-color: #f0f0f0; }'; // 你的CSS样式
iframeDocument.head.appendChild(styleElement);
```

### 2. 通过iframe的src属性引用的页面

如果你可以控制`iframe`中显示内容的HTML，你可以直接在该HTML文件中引入CSS样式或者`<style>`标签。例如，iframe的HTML内容可能是这样的：

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="iframe-style.css">
    
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    
</body>
</html>
```

这个HTML文件会作为`iframe`的`src`属性的值来加载显示。

### 3. 通过查询参数或其他方法传递样式信息

如果你不能直接修改`iframe`内容，但是仍然可以控制其加载的URL，可以考虑通过URL的查询参数传递样式信息，并在`iframe`内部的页面中通过JavaScript来动态应用这些样式。这种方法需要`iframe`内容页面的支持来解析URL参数并应用样式。

### 4. 使用CSS隔离属性（如`all: initial;`）

在某些情况下，你可能想让`iframe`元素自身的样式与外部页面隔离。使用CSS的`all`属性可以重置`iframe`元素内的所有属性到初始值，从而避免外部样式的影响：

```css
#my-iframe {
  all: initial;
}
```

需要注意的是，这并不会影响到`iframe`里面页面的样式，只是重置了`iframe`元素自身的样式。

### 注意事项

由于浏览器的同源策略，你可能无法通过JavaScript访问或修改不同源的`iframe`内容。这是一种安全措施，以防止跨站点脚本攻击（XSS）。

如果仍然需要向不同源的`iframe`应用样式，通常需要`iframe`内容的提供者合作，比如通过接收URL参数、提供API接口或者支持某种约定好的通信机制（如window.postMessage）来实现样式的应用。

**编辑：**除非设置了适当的[CORS 标头](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)，否则这不适用于跨域。

这里有两个不同的东西：iframe块的样式和iframe中嵌入的页面的样式。您可以按照通常的方式设置 iframe 块的样式：

    <iframe name="iframe1" id="iframe1" src="empty.htm" 
            frameborder="0" border="0" cellspacing="0"
            style="border-style: none;width: 100%; height: 120px;"></iframe>
    

iframe 中嵌入的页面样式必须通过将其包含在子页面中来设置：

    <link type="text/css" rel="Stylesheet" href="Style/simple.css" />
    

或者可以使用 Javascript 从父页面加载：

    var cssLink = document.createElement("link");
    cssLink.href = "style.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css"; 
    frames['iframe1'].document.head.appendChild(cssLink);

我在使用**Google 日历**时遇到了这个问题。我想将其设计为深色背景并更改字体。

幸运的是，嵌入代码中的 URL 对直接访问没有限制，因此通过使用 PHP 函数`file_get_contents`可以从页面获取全部内容。可以调用位于您服务器上的 php 文件，例如，而不是调用 Google URL。`google.php`，其中将包含经过修改的原始内容：

    $content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
    

将路径添加到样式表：

    $content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
    

（这会将样式表放在结束标记之前的最后`head`。）

指定原url的基础url，以防css和js相对调用：

    $content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
    

最终`google.php`文件应如下所示：

    <?php
    $content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
    $content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
    $content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
    echo $content;
    

然后将`iframe`嵌入代码更改为：

    <iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
    

祝你好运！

如果 iframe 的内容不完全在您的控制之下，或者您想访问具有不同样式的不同页面的内容，您可以尝试使用 JavaScript 对其进行操作。

    var frm = frames['frame'].document;
    var otherhead = frm.getElementsByTagName("head")[0];
    var link = frm.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", "style.css");
    otherhead.appendChild(link);
    

请注意，根据您使用的浏览器，这可能仅适用于来自同一域的页面。

var $head = $("#eFormIFrame").contents().find("head");
                   
    $head.append($("<link/>", {
        rel: "stylesheet",
        href: url,
        type: "text/css"
    }));

以下是如何直接应用 CSS 代码，而不需要`<link>`加载额外的样式表。

    var head = jQuery("#iframe").contents().find("head");
    var css = '<style type="text/css">' +
              '#banner{display:none}; ' +
              '</style>';
    jQuery(head).append(css);
    

这会隐藏 iframe 页面中的横幅。谢谢你的建议！

如何将 css 应用于 iframe

在内联CSS中，由于直接作用于HTML元素的 "style" 属性中无法包含伪类选择器，我们不能直接在标签的 "style" 属性内设置 "a:hover"。内联样式主要用于单个元素的样式设置，而":hover" 是一个伪类选择器，通常是在内部样式表或外部样式表中定义的。

然而，如果你想要达到类似的效果而只能使用内联样式，你可以使用JavaScript来动态改变元素的样式当鼠标悬停在上面。这是一个示例代码，演示如何使用JavaScript来模拟 `a:hover` 的效果：

```html
<a href="#" id="hoverLink" onmouseover="hoverEffect(true)" onmouseout="hoverEffect(false)">Hover over me!</a>

<script>
function hoverEffect(isHovering) {
  var link = document.getElementById('hoverLink');
  if (isHovering) {
    link.style.color = 'red'; // 鼠标悬停时的颜色
    link.style.textDecoration = 'underline'; // 鼠标悬停时的文本装饰
  } else {
    link.style.color = 'initial'; // 鼠标离开时的颜色
    link.style.textDecoration = 'none'; // 鼠标离开时的文本装饰
  }
}
</script>
```

在这个例子中，当鼠标悬停在链接上时，`hoverEffect(true)` 被调用，将链接的文本颜色设置为红色并且下划线。当鼠标离开链接时，`hoverEffect(false)` 被调用，将链接的样式恢复到初始状态。通过这种方法，我们可以模拟内联CSS中的 `a:hover` 效果。

简短的回答：你不能。

长答案：你不应该。

给它一个类名或一个 id，并使用样式表来应用样式。

`:hover`是一个伪选择器，对于[CSS](http://en.wikipedia.org/wiki/Cascading_Style_Sheets)来说，仅在样式表中有意义。没有任何内联样式的等效项（因为它没有定义选择标准）。

对OP评论的回应：

请参阅_[Totally Pwn CSS with Javascript，](https://web.archive.org/web/20160104183713/http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript)_了解动态添加 CSS 规则的好脚本。另请参阅_[更改样式表](http://www.quirksmode.org/dom/changess.html)_以了解有关该主题的一些理论。

另外，不要忘记，如果可以的话，您可以添加到外部样式表的链接。例如，

    <script type="text/javascript">
      var link = document.createElement("link");
      link.setAttribute("rel","stylesheet");
      link.setAttribute("href","http://wherever.com/yourstylesheet.css");
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(link);
    </script>
    

注意：以上假设有[头部](https://en.wikipedia.org/wiki/HTML_element#Document_structure_elements)。

`onMouseOver`您可以通过在和参数中使用 JavaScript 更改样式来获得相同的效果`onMouseOut`，尽管如果您需要更改多个元素，则效率极低：

    <a href="abc.html"
       onMouseOver="this.style.color='#0F0'"
       onMouseOut="this.style.color='#00F'" >Text</a>

运行代码片段Hide results

展开片段

另外，我无法确定`this`在这种情况下是否有效。您可能需要使用 来切换它`document.getElementById('idForLink')`。

[You could do it](http://www.w3.org/TR/2002/WD-css-style-attr-20020515) at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't .

You can't do exactly what you're describing, since `a:hover` is part of the selector, not the CSS rules. A stylesheet has two components:

    selector {rules}
    

Inline styles only have rules; the selector is implicit to be the current element.

The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.

However, you can get close, because a `style` set can technically go almost anywhere:

    <html>
      <style>
        #uniqueid:hover {do:something;}
      </style>
      <a id="uniqueid">hello</a>
    </html>

While it appears to be impossible to define a hover-rule inline, you can define the _value_ of styles inline using a CSS _variable_:

    :hover {
      color: var(--hover-color);
    }

    <a style="--hover-color: green">
        Library
    </a>

Run code snippetHide results

Expand snippet

Consider using an attribute or a class in addition to the selector (e.g., `[hover-color]:hover`) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).

如何在内联 css 中使用 hover 操作？

在CSS中，类名选择器是由一个点（`.`）后跟类名来定义的。类名可以包含以下字符：

1. 字母（`a-z`，`A-Z`）。
2. 数字（`0-9`），但不能作为第一个字符。
3. 下划线（`_`）。
4. 破折号（`-`），但不能作为第一个字符，除非后面有其他合法字符。
5. ASCII字符：在某些情况下，可以使用转义序列。
6. Unicode字符：可以使用转义序列，允许几乎所有的字符，包括非ASCII字符。

CSS类名的第一个字符不能是数字、破折号，或者更具体地说，不能是任何可以构成数字的字符，包括加号、减号、小数点、或者数字本身。但是，可以通过转义序列在类名中使用这些字符。

CSS类名也必须遵守以下规则：

- 不能包含空格。
- 不能包含任何不被允许的特殊字符，如 `!` `@` `#` `$` `%` `^` `&` `*` `(` `)` `=` `+` `[` `]` `{` `}` `|` `;` `:` `"` `'` `<` `>` `,` `/` `?` 等。
- 不能以破折号 `-` 开头，如果后面没有至少一个更多的字符，因为这会与CSS的“否定”伪类选择器混淆。

例如，以下是一些合法的CSS类名：

```css
/* 合法的类名 */
.my-class {}
.class_name {}
.class-name {}
.class3name {}
.u8 {}
.\31stElement {} /* 使用转义序列允许数字开头 */
```

以下是一些不合法的CSS类名，因为它们违反了上述规则：

```css
/* 不合法的类名 */
.3rd-class {} /* 数字开头 */
.-class-name {} /* 用破折号开头，没有紧跟其他字符 */
.my class {} /* 包含空格 */
.$dollar {} /* 包含特殊字符 */
```

在实践中，开发者通常会选择意义清晰且易于理解的类名，以便维护CSS代码的可读性和可管理性。

你可以直接查看[CSS语法](http://www.w3.org/TR/CSS21/grammar.html#scanner)。

_基本上_1，名称必须以下划线 ( `_`)、连字符 ( `-`) 或字母 ( `a`– `z`) 开头，后跟任意数量的连字符、下划线、字母或数字。有一个问题：如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且名称的长度必须至少为 2 个字符。

    -?[_a-zA-Z]+[_a-zA-Z0-9-]*
    

简而言之，前面的规则转换为以下内容，摘自[W3C 规范](https://www.w3.org/TR/CSS21/syndata.html#characters)：

> 在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 \[a-z0-9\] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 (-) 和下划线 (\_) ;它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B&W？”或“B\\26 W\\3F”。

以连字符或下划线开头的标识符通常保留用于特定于浏览器的扩展，例如`-moz-opacity`.

1由于包含转义的 Unicode 字符（没有人真正使用），这一切变得更加复杂。

2请注意，根据我链接的语法，以_两个_连字符开头的规则（例如 , `--indent1`）是无效的。不过，我很确定我在实践中见过这种情况。

令我惊讶的是，这里的大多数答案都是错误的。事实证明：

**CSS 中的 CSS 类名称中允许使用除 NUL 之外的任何字符。**（如果 CSS 包含 NUL（转义与否），则结果未定义。\[ [CSS 字符](http://www.w3.org/TR/CSS21/syndata.html#characters)\]）但_在 HTML 中_，也不允许永久未分配的代码点。 HTML 也没有办法在[类名属性中包含](http://www.w3.org/TR/html/dom.html#classes)[空格字符（空格、制表符、换行符、换页符和回车符）](http://www.w3.org/TR/html/infrastructure.html#space-character)，因为这些是类_列表_，并且此处使用空格来将类名彼此分隔开。[](http://www.w3.org/TR/html/dom.html#classes)

[Mathias Bynens 的答案](https://stackoverflow.com/a/6592488/8554766)链接到[解释](http://mathiasbynens.be/notes/css-escapes)和[演示](http://mathiasbynens.be/demo/crazy-class)，展示如何使用这些名称。用CSS代码_写下_，类名_可能需要转义_，但这不会改变类名。例如，不必要的过度转义表示看起来与该名称的其他表示不同，但它仍然引用相同的类名称。

大多数其他（编程）语言没有转义变量名称（“标识符”）的概念，因此变量的所有表示形式必须看起来相同。 CSS 中并非如此。

因此，如果您需要将随机字符串转换为 CSS 类名：请注意 NUL 和空格，并转义（相应地适用于 CSS 或 HTML）。完毕。

_[我已经在CSS 字符转义序列](http://mathiasbynens.be/notes/css-escapes)_中深入回答了您的问题。这篇文章还解释了如何转义 CSS（和 JavaScript）中的任何字符，我也为此制作了[一个方便的工具](http://mothereff.in/css-escapes#0%7E!%40%24%25%5E%26%2A%28%29%5F%2B-%3D%2C.%2F%27%3B%3A%22%3F%3E%3C%5B%5D%5C%7B%7D%7C%60%23)。从该页面：

> 如果您要为某个元素指定 ID 值``~!@$%^&*()_+-=,./';:"?><[]{}|`#``，则选择器将如下所示：
> 
> **CSS：**
> 
>     <style>
>       #\~\!\@\$\%\^\&\*\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
>       {
>         background: hotpink;
>       }
>     </style>
>     
> 
> **JavaScript：**
> 
>     <script>
>       // document.getElementById or similar
>       document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
>       // document.querySelector or similar
>       $('#\\~\\!\\@\\$\\%\\^\\&\\*\$\$\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
>     </script>
>

阅读[W3C 规范](http://www.w3.org/TR/CSS21/syndata.html#characters)。 （这是 CSS 2.1；找到适合您假设的浏览器的版本）

相关段落：

> 在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 \[a-z0-9\] 和 ISO 10646 字符 U+00A1 及更高版本，加上连字符 (-) 和下划线 (\_) ;它们不能以数字或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B&W？”或“B\\26 W\\3F”。

正如[@mipadi在](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#comment269931_449000)[Kenan Banks 的回答](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors/449000#449000)中指出的那样，在同一网页中也有一个[警告：](http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords)

> 在 CSS 中，标识符可能以“-”（破折号）或“\_”（下划线）开头。以“-”或“\_”开头的关键字和属性名称保留用于供应商特定的扩展。此类特定于供应商的扩展应具有以下格式之一：
> 
>     '-' + vendor identifier + '-' + meaningful name
>     '_' + vendor identifier + '-' + meaningful name
>     
> 
> 例子）：
> 
> 例如，如果 XYZ 组织添加了一个属性来描述显示器东侧边框的颜色，他们可能会将其称为 -xyz-border-east-color。
> 
> 其他已知的例子：
> 
>     -moz-box-sizing
>     -moz-border-radius
>     -wap-accesskey
>     
> 
> 保证任何当前或未来级别的 CSS 都不会在属性或关键字中使用开头的破折号或下划线。因此，典型的 CSS 实现可能无法识别此类属性，并且可能根据处理解析错误的规则忽略它们。然而，由于开头的破折号或下划线是语法的一部分，CSS 2.1 实现者应该始终能够使用符合 CSS 的解析器，无论他们是否支持任何特定于供应商的扩展。
> 
> 作者应避免特定于供应商的扩展

完整的正则表达式是：

    -?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*
    

`-`因此，除了“ ”和“ ”之外，列出的所有字符`_`如果直接使用都是不允许的。但您可以使用反斜杠`foo\~bar`或使用 Unicode 表示法对它们进行编码`foo\7E bar`。

哪些字符在 css 类名选择器中是合法的？

在保持纵横比（即图像的宽高比）的同时自动调整图像大小是图像处理中的一个常见需求，以确保图像在缩放过程中不会出现变形。要实现这个功能，我们通常需要执行以下步骤：

1. **获取原始纵横比**：
   我们首先获取原始图像的宽度和高度，并计算它的纵横比。纵横比通常是宽度除以高度（或者相反，取决于你希望如何定义）。

   ```python
   original_width = original_image.width
   original_height = original_image.height
   aspect_ratio = original_width / original_height
   ```

2. **确定新的尺寸**：
   根据我们需要的新大小，我们定义一个新的宽度或高度，并计算另一个维度以保持纵横比不变。

   例如，假设我们希望将图像宽度调整为 `new_width`，那么我们可以这样计算新的高度：

   ```python
   new_width = desired_width # 这是我们想要设置的新宽度
   new_height = new_width / aspect_ratio
   ```

   或者，如果我们有一个期望的高度 `new_height`，则计算新的宽度：

   ```python
   new_height = desired_height # 这是我们想要设置的新高度
   new_width = new_height * aspect_ratio
   ```

3. **执行图像调整大小**：
   有了新的宽度和高度后，我们就可以使用图像处理库（如Pillow库）进行实际的调整大小操作。

   ```python
   from PIL import Image
   resized_image = original_image.resize((int(new_width), int(new_height)), Image.ANTIALIAS)
   ```

4. **验证结果**：
   在完成调整大小后，我们应该验证新图像的纵横比是否与原始图像相同。

   ```python
   assert abs((resized_image.width / resized_image.height) - aspect_ratio) < tolerance
   ```

以下是一个实际的例子，假设我们有一个图像文件 `example.jpg`，我们想要将其宽度调整为500像素，同时保持原始纵横比：

```python
from PIL import Image

# 打开原始图像
original_image = Image.open('example.jpg')

# 计算原始纵横比
original_width, original_height = original_image.size
aspect_ratio = original_width / original_height

# 设置新的宽度，并计算新的高度以保持纵横比
new_width = 500
new_height = int(new_width / aspect_ratio)

# 调整图像大小
resized_image = original_image.resize((new_width, new_height), Image.ANTIALIAS)

# 保存或显示调整后的图像
resized_image.save('resized_example.jpg')
# resized_image.show()
```

在这段代码中，我利用了Pillow库来完成图像的大小调整，同时确保新图像的高度会根据所需宽度自动计算，以保证纵横比不变。这样调整后的图像就不会出现拉伸或压缩变形。

不要对图像标签应用明确的宽度或高度。相反，给它：

    max-width:100%;
    max-height:100%;
    

另外，`height: auto;`如果您只想指定宽度。

示例： http: [//jsfiddle.net/xwrvxser/1/](http://jsfiddle.net/xwrvxser/1/)

    img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .portrait {
        height: 80px;
        width: 30px;
    }
    
    .landscape {
        height: 30px;
        width: 80px;
    }
    
    .square {
        height: 75px;
        width: 75px;
    }

    Portrait Div
    <div class="portrait">
        <img src="https://i.stack.imgur.com/xkF9Q.jpg">
    </div>
    
    Landscape Div
    <div class="landscape">
        <img src="https://i.stack.imgur.com/xkF9Q.jpg">
    </div>
    
    Square Div
    <div class="square">
        <img src="https://i.stack.imgur.com/xkF9Q.jpg">
    </div>

运行代码片段隐藏结果

展开片段

事实证明还有另一种方法可以做到这一点：[`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。

```
<img style='height: 100%; width: 100%; object-fit: contain'/>
```

会做这项工作。当然，不要忘记包含其他必要的属性，例如 `src`和。`alt`

目前，对于 JPEG 或 PNG 文件等固定大小的图像，无法以确定的方式正确执行此操作。

**要按比例调整图像大小，必须将高度或宽度设置_为_“100%”，但不能同时设置两者。**如果您将两者都设置为“100%”，您的图像将被拉伸。

选择高度还是宽度取决于您的图像和容器尺寸：

1.  如果您的图像和容器都是“纵向形状”或都是“横向形状”（分别是高度大于宽度，或宽度大于高度），那么高度或宽度中的哪一个是“％100”并不重要。
2.  如果您的图像是纵向的，而容器是横向的，则必须`height="100%"`在图像上进行设置。
3.  如果您的图像是横向的，而容器是纵向的，则必须`width="100%"`在图像上进行设置。

如果您的图像是 SVG（一种可变大小的矢量图像格式），您可以自动进行扩展以适应容器。

您只需确保 SVG 文件的标签中没有设置以下属性`<svg>`：

    height
    width
    viewbox
    

大多数矢量绘图程序都会在导出 SVG 文件时设置这些属性，因此您每次导出时都必须手动编辑文件，或者编写脚本来完成此操作。

这是一个解决方案，即使提供的图像太小或太大而无法放入 div，也可以在 div 内垂直和水平对齐您的 img，而无需任何拉伸。

HTML 内容：

    <div id="myDiv">
      <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
    </div>
    

CSS 内容：

    #myDiv
    {
      height: 104px;
      width: 140px;
    }
    #myDiv img
    {
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      display: block;
    }
    

jQuery 部分：

    var logoHeight = $('#myDiv img').height();
        if (logoHeight < 104) {
            var margintop = (104 - logoHeight) / 2;
            $('#myDiv img').css('margin-top', margintop);
        }

有两种方法可以使图像具有响应能力。

1.  当图像是背景图像时。
    
        #container{
            width: 300px;
            height: 300px;
            background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        
        <div id="container"><div>
        
    
    [在这里](https://codepen.io/sirajalam049/pen/ppzQzW)运行它[](https://codepen.io/sirajalam049/pen/ppzQzW)
    
    但是应该使用标签来放置图像，因为它比**SEO**`img`更好，因为您可以在标签中写入**关键字**。所以在这里你可以使图像响应。`background-image``alt``img`
    
2.  当图像位于`img`标签中时。
    
        #container{
            max-width: 400px;
            overflow: hidden;
        }
        img{
            width: 100%;
            object-fit: contain;
        }
        
        <div id="container">
            <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
        <div>
        
    
    [在这里](https://codepen.io/sirajalam049/pen/Rxbezw)运行它[](https://codepen.io/sirajalam049/pen/Rxbezw)

如何在保持纵横比的同时自动调整图像大小

CSS 提供了几种方法来实现根据容器的大小缩放字体大小。下面是几种主要的方法：

### 1. 使用视口单位（Viewport Units）
利用视口单位，如 `vw`, `vh`, `vmin`, `vmax`，可以实现字体大小的响应式缩放。例如，`vw` 表示视口宽度的百分比，`vh` 表示视口高度的百分比。

```css
.container {
  font-size: 2vw; /* 字体大小为视口宽度的2% */
}
```
这种方法的缺点是字体大小直接与视口的大小挂钩，而不是容器的大小。

### 2. 使用媒体查询（Media Queries）
通过媒体查询，可以在不同的屏幕尺寸下应用不同的样式规则。这样可以为不同的容器宽度设置不同的字体大小。

```css
.container {
  font-size: 16px; /* 默认字体大小 */
}

@media (max-width: 600px) {
  .container {
    font-size: 14px; /* 在视口宽度小于600px时变小 */
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .container {
    font-size: 18px; /* 在视口宽度介于601到1200px时变大 */
  }
}
```

### 3. 使用CSS计算函数 `calc()`
`calc()` 函数允许您执行计算来确定CSS属性的值。可以将固定大小与视口单位相结合，为字体大小提供更多控制。

```css
.container {
  font-size: calc(12px + 1vw);
}
```

### 4. 使用rem单位和html的font-size
如果容器的大小基于rem单位，可以通过改变html标签的font-size来间接改变容器内字体的大小。

```css
html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

.container {
  font-size: 1.5rem; /* 1.5倍于html的字体大小 */
}
```

### 5. 使用JavaScript
在某些情况下，可能需要更精细的控制，可以使用JavaScript来监听窗口大小的变化，并根据容器的大小动态调整字体大小。

```javascript
function adjustFontSize() {
  var container = document.querySelector('.container');
  var containerWidth = container.offsetWidth;
  var fontSize = containerWidth / 100; // 假设容器宽度的百分之一为基本字体大小
  container.style.fontSize = fontSize + 'px';
}

window.addEventListener('resize', adjustFontSize);
adjustFontSize();
```

使用JavaScript的方法提供了最灵活的解决方案，但它需要额外的性能开销，并且可能会在没有JavaScript的环境下失效。

通过上述方法，你可以根据容器的大小来缩放字体大小，从而实现响应式设计。每种方法都有其适用场景和限制，可以根据实际需要选择最合适的方法。

**容器查询**现在可能是最好的选择，具体取决于您的用例，并且所有主要浏览器都支持。请参阅此处的支持级别：[https://caniuse.com/mdn-css\_properties\_container](https://caniuse.com/mdn-css_properties_container)

现在很容易控制：

    .module h2 {
      font-size: 1em;
      container-name: sidebar
    }
    
    @container sidebar (min-width: 700px) {
      .module h2 {
        font-size: 2em;
      }
    }

运行代码片段Hide results

展开片段

请查看有关容器查询的 MDN 文章了解更多详细信息：[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Container\_Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)

您可以完成的更多示例：[https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/](https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/)

* * *

**旧答案**

如果容器不是正文，CSS 技巧涵盖了_[使文本适合容器](https://css-tricks.com/fitting-text-to-a-container/)_中的所有选项。

如果容器是主体，那么您要寻找的是[Viewport-percentage lengths](https://drafts.csswg.org/css-values/#viewport-relative-lengths)：

> 视**口百分比长度与**[初始包含块](https://www.w3.org/TR/CSS21/visudet.html#containing-block-details)的大小相关。当初始包含块的高度或宽度更改时，它们会相应地缩放。然而，当根元素上的溢出值为 时`auto`，任何滚动条都被假定不存在。

这些值为：

*   `vw`（视口宽度的%）
*   `vh`（视口高度的%）
*   `vi`（根元素内联轴方向视口大小的 1%）
*   `vb`（根元素块轴方向视口大小的 1%）
*   `vmin``vw`（或中较小的一个`vh`）
*   `vmax`（较大的 或`vw`或`vh`）

1 v\* 等于初始包含块的 1%。

使用它看起来像这样：

    p {
        font-size: 4vw;
    }
    

正如您所看到的，当视口宽度增加时， 也随之增加`font-size`，而无需使用媒体查询。

这些值是一个大小调整单位，就像`px`或一样`em`，因此它们也可用于调整其他元素的大小，例如宽度、边距或填充。

浏览器支持非常好，但您可能需要备用，例如：

    p {
        font-size: 16px;
        font-size: 4vw;
    }
    

查看支持统计数据： https: [//caniuse.com/viewport-units](https://caniuse.com/viewport-units)。

另外，请查看 CSS 技巧以获得更广泛的外观：_[Viewport Sized Typography](https://css-tricks.com/viewport-sized-typography/)_

这是一篇关于设置最小/最大尺寸以及对尺寸进行更多控制的好文章：_[精确控制响应式排版](https://www.madebymike.com.au/writing/precise-control-responsive-typography/)_

这是设置大小以`calc()`使文本填充视口的示例： https: [//codepen.io/CrocoDillon/pen/wvdrBY](https://codepen.io/CrocoDillon/pen/wvdrBY)

另外，请查看这篇文章，它也使用了一种被称为“moltenleading”的技术来调整行高：_[CSS 中的 Moltenleading](https://css-tricks.com/molten-leading-css/)_

> 但是如果容器不是视口（主体）怎么办？

[Alex在](https://stackoverflow.com/users/376947)[2507rkt3 的回答](https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container#comment29460412_19814948)下的评论中提出了这个问题。

这一事实并不意味着`vw`不能在某种程度上用于确定该容器的大小。现在要看到任何变化，我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比`width`还是通过 100% 减去利润。如果容器总是设置为`200px`宽，那么这一点就变得“没有意义”——然后只需设置一个`font-size`适合该宽度的值。

**实施例1**

然而，对于宽度灵活的容器，必须认识到，在某种程度上，容器的_**大小仍然与视口无关**_。因此，需要`vw`根据与视口的百分比大小差异来调整设置，这意味着要考虑父包装器的大小。[**举个例子**](http://jsfiddle.net/T84wL/1/)：

    div {
        width: 50%;
        border: 1px solid black;
        margin: 20px;
        font-size: 16px;
        /* 100 = viewport width, as 1vw = 1/100th of that
           So if the container is 50% of viewport (as here)
           then factor that into how you want it to size.
           Let's say you like 5vw if it were the whole width,
           then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
        */
        font-size: 2.5vw;
    }
    

假设这里`div`是 的子级`body`，它`50%`的`100%`宽度就是这个基本情况下的视口大小。基本上，您想要设置一个`vw`对您来说看起来不错的。正如您在上面的 CSS 内容中我的评论中所看到的，您可以通过数学方式“思考”整个视口大小，但您不需_要这样做_。文本将随容器“弯曲”，因为容器会随着视口大小的调整而弯曲。[这是两个不同大小的容器的示例](http://jsfiddle.net/T84wL/6/)。

**实施例2**

您可以通过强制基于此进行计算来帮助确保视口大小。[**考虑这个例子**](http://jsfiddle.net/T84wL/3/)：

    html {width: 100%;} /* Force 'html' to be viewport width */
    body {width: 150%; } /* Overflow the body */
    
    div {
        width: 50%;
        border: 1px solid black;
        margin: 20px;
        font-size: 16px;
        /* 100 = viewport width, as 1vw = 1/100th of that
           Here, the body is 150% of viewport, but the container is 50%
           of viewport, so both parents factor  into how you want it to size.
           Let's say you like 5vw if it were the whole width,
           then for this container, size it at 3.75vw
           (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
        */
        font-size: 3.75vw;
    }
    

大小仍然基于视口，但本质上是基于容器大小本身设置的。

如果容器的大小动态变化......
-----------------

如果容器元素的大小最终通过`@media`断点或 JavaScript 动态改变其百分比关系，那么无论基本“目标”是什么，都需要重新计算以维持文本大小调整的相同“关系”。

以上面#1 为例。如果通过或 JavaScript`div`将 切换为宽度，则同时需要在媒体查询或通过 JavaScript 中调整 来适应新的计算。这将使文本大小与原始容器的“宽度”从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减少了。`25%``@media``font-size``5vw * .25 = 1.25``50%`

**一个挑战**

[使用CSS`calc()`功能](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)时，动态调整会变得困难，因为该功能`font-size`此时不起作用。因此，如果宽度在 上发生变化，则无法进行纯 CSS 调整`calc()`。当然，边距宽度的微小调整可能不足以保证 的任何更改`font-size`，因此可能并不重要。

SVG 解决方案：
---------

    .resizeme {
      resize: both;
      margin: 0;
      padding: 0;
      height: 75px;
      width: 500px;
      background-color: lightblue;
      overflow: hidden;
    }

    <div class="resizeme">
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 500 75"
        preserveAspectRatio="xMinYMid meet"
        style="background-color:green"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
            <text
              x="0"
              y="75"
              font-size="75"
              fill="black"
            >█Resize This█</text>
          </svg>
    </div>

运行代码片段Hide results

展开片段

使用 SVG 和文本换行的解决方案`foreignObject`：
---------------------------------

    .resizeme {
      resize: both;
      margin: 0;
      padding: 0;
      height: 200px;
      width: 500px;
      background-color: lightblue;
      overflow: hidden;
    }

    <div class="resizeme">
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 500 200"
        preserveAspectRatio="xMinYMin meet"
      >
          <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">
            <div xmlns="http://www.w3.org/1999/xhtml" style="background-color:lightgreen;">
              <h1>heading</h1>
              <p>Resize the blue box.</p>
            </div>
          </foreignObject>
        </svg>
    </div>

运行代码片段Hide results

展开片段

[CSS 容器查询](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)
==================================================================================

2022 年末添加的 CSS 功能集使使用容器缩放字体大小变得简单。

容器查询带有一组新的 CSS 单元**/**`cqw`（`cqh`容器**查询**宽度**/** h**八**）。要使用它们，您需要在要使用其大小的父元素上设置属性（不必是直接父元素）。最小的例子：`container-type`

    <div>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
    
    <style>
      div {
        container-type: inline-size;
      }
      p {
        font-size: 5cqw;
      }
    </style>

运行代码片段Hide results

展开片段

字体大小会随着容器的增大而平滑增大。当容器宽度为 1000px 时，`p`字体大小将为`1000px / 100 * 5 = 50px`.

`container-type`可以是`size`或`inline-size`。`size`跟踪容器的高度和宽度，这允许您同时使用`cqw`和`cqh`。在网络上的大多数情况下，高度是根据内容计算的，您只需指定宽度。为了节省浏览器的一些工作，您通常需要进行设置`container-type: inline-size;`，以便浏览器仅跟踪内联尺寸，通常是宽度（除非您设置[`writing-mode`](https://developer.mozilla.org/docs/Web/CSS/writing-mode)为垂直）。

[浏览器对容器查询的支持](https://caniuse.com/css-container-queries)正在迅速增长：

*   2023年1月1日：75%
*   2023-04-03: 83%
*   2023年11月24日：90%

在我的一个项目中，我使用 vw 和 vh 之间的“混合”来根据我的需要调整字体大小，例如：

    font-size: calc(3vw + 3vh);
    

我知道这并不能回答OP的问题，但也许它可以成为其他人的解决方案。

所有问题