CSS选择顺序

我很困惑，如何在性能和Web标准CSS选择顺序

条件假设我的HTML标记正确声明CSS选择器是

<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来设计这个网站的

如果我想设计.item-IMG我可以在两个变化
一个这样做的：

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

或B：

.item-img { width:100%; }

有人告诉我，一个变化是优选的，因为它使得它独特的，因此，如果我使用的类.item-IMG在CSS文件别处时， CSS将不会被应用。哪一个在标准和性能方面更受欢迎？如果我想确保其特定的页面，我应该在网页的正文中添加一个ID标签，并宣布将CSS作为假设有listings.php

#listings .item-img

或

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

一页

来源

2013-03-23 meWantToLearn

可以做空使用该DIV ID标签将使其独特的没有别的＃项目-IMG {...} – 2013-03-23 20:23:29

的一类，因为可以有多个itemList中 – meWantToLearn 2013-03-23 20:24:55

如何尝试为包含所有这些类的容器设置一个ID，并将它用在你的css引用中，就像你说的#listings .item-img – 2013-03-23 20:27:53

B的性能比A稍高，但实际上它并不相关：两者都是FAST。还有无数的其他改进领域（少了图片和文件的下载，其他域名的DL，JS的重量，CSS和图片，JS中的选择器等）。 CSS选择器在性能优先级上接近最后（HTML代码中的空格和注释最后是imo）

就我所知，应该使用选择器B.但是，如果没有其余页面，很难回答。这个班有什么其他用途？它会在其他地方重用吗？怎么样？
为什么你有一个名为列表和类的项目，但它不是一个ul元素？为什么你在img上添加“-img”到一个类的名字？ img.item也可以为你工作，或者简单地.someParent img？等

我很困惑，如何在性能和Web标准方面正确声明CSS选择

有没有网络的标准，告诉你选择器，你应该使用;）这是关于代码质量，公约在你的团队或与你的客户或个人喜好，在项目层面思考（这是困难的，需要经验和客户给予足够的PSDs。定期我要命名与2 PSD的类，然后来20其他^^）

来源

2013-03-23 20:30:25 FelipeAls

案例A：

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

这将需要更多时间来渲染。

案例B：

.item-img { width:100%; }

这是短期和简单。 IT将以“item-img”为目标。如果你使用同一个类来达到不同的目的，那么你可以增加元素的特异性。您可以通过

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

来源

2016-09-22 07:43:37

CSS选择顺序

回答

相关问题