0

我对如何根据性能和 Web 标准正确声明 CSS 选择器感到困惑

假设我的 html 标记是

<div class="itemList">
    <div class="itemList-img-wrapper">
         <img class="item-img" src="reref.jpg" />
    </div>
     <div class="bottom">
          <div class="info"> <h2>Data is invalid</h2> </div>
     </div>
 </div>

有各种声明 css 来设计这个 html

如果我想设计 .item-img，我可以通过两种方式进行
A：

 .itemList .itemList-img-wrapper .item-img { width:100%; }

或B：

 .item-img { width:100%; }

有人告诉我，变体 A 是首选，因为它使它独一无二，因此如果我在 css 文件的其他位置使用类 .item-img，则不会应用 css。在标准和性能方面首选哪一个？如果我想确保它特定于一个页面，我应该在页面正文中添加一个 ID 标签并将 CSS 声明为假设有一个页面 Listings.php

#listings .item-img

或者

#listings .itemList .itemList-img-wrapper .item-img
4

2 回答 2

2

B 的性能略高于 A，但实际上它无关紧要：两者都是 FAST。还有无数其他方面的改进（下载的图像和文件更少，来自其他域名的 DL，JS、CSS 和图像的权重，JS 中的选择器等）。CSS 选择器在性能优先级上接近最后（HTML 代码中的空白和注释在 imo 中排在最后）

据我所知，您应该使用选择器 B。但是如果没有 pageS 的其余部分，则很难回答。这个类还有什么其他用途？它会在其他地方重复使用吗？如何？
为什么你有一个名为 List 的类和 item 但它不是一个ul元素？为什么要在 img 上的类名中添加“-img”？也适合你img.item，或者只是.someParent img？ETC

我对如何根据性能和 Web 标准正确声明 CSS 选择器感到困惑

没有网络标准告诉您应该使用哪个选择器；）这是关于代码质量、团队或客户或个人偏好的约定、项目级别的思考（这很难，需要经验和客户提供的足够 PSD。经常我必须用 2 个 PSD 来命名类，然后来另外 20 个 ^^)

于 2013-03-23T20:30:25.853 回答
0

案例一：

.itemList .itemList-img-wrapper .item-img { 宽度：100%; }

渲染需要更多时间。

案例B：

.item-img { 宽度：100%; }

它简短而简单。IT 将针对所有具有“ item-img ”类的元素。如果您将相同的类用于不同的目的，那么您可以增加元素的特异性。你可以短

.itemList .item-img { 宽度：100%; }
于 2016-09-22T07:43:37.857 回答