5

我不知道链接是否是正确的术语。
我谈论这样的编码：

    html > body > div > ul > li > a{
        /*css*/
    }

我和我的一个朋友谈过，他告诉我，像这样编写 css 在渲染 css 时会导致浏览器性能下降。
那么这是真的还是我真的应该只声明类/ID并指定它们？

4

5 回答 5

7

您应该尽可能具体，以便定位您的元素。最好使用 id。

但最终——这种微优化是相当无关紧要的。只有在您优化了几乎所有其他内容（压缩图像、提供静态内容、使用 css 精灵、最小化资产等）后才值得一看

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

于 2013-04-16T08:48:57.430 回答
3

在我看来，您应该使用最少数量的选择规则。规则越多，处理时间就越长。

所以是的，使用类和 ID 是更好的做法。

同样是您上面给出的示例，如果您尝试将 CSS 应用于所有标签，则只需

a {
/* css */
}
于 2013-04-16T08:48:24.217 回答
2

浏览器从右到左读取 CSS，这意味着在您的示例中，浏览器将查找 all <a>，然后查找 parent <li>，直到找到<html>.

所以对于性能来说是的，这种写作风格对性能不利。

于 2013-04-16T08:49:52.123 回答
1

If you only want to apply to an element within a certain element, you can try something like this:

#ullID li{ ... }

By doing so, you set the styles for the li tags within the #ullID element. If you want to go even deeper, you can do it like so:

#ullID li a{ ... }

I'd say this will be faster performance wise in contrary to using: 

 html > body > div > ul > li > a{ ... }

Hope this helps :)

于 2013-04-16T09:07:32.703 回答
1

这是选择器优化的粗略近似：

  1. 编号（#myid）
  2. 类（.myclass）
  3. 标签（div，h1，p）
  4. 项目清单
  5. 相邻兄弟 (h1 + p)
  6. 列表项子项 (ul > li)
  7. 后代（li a）
  8. 通用 (*) 9.attribute (a[rel="external"])
  9. 伪类和伪元素 (a:hover, li:first)

这是在谈论 SEO 时要记住的事情。这并不意味着您必须忘记所有这些而只使用类和 id。问题是，当您说div #child ul li a img浏览器首先查看和 img 时，然后查看它是否有一个有a父级的li父级，依此类推。

于 2013-04-16T09:10:44.383 回答