我想更好地理解何时使用类来定位内容而不是其他可用选项,特别是后代选择器.
在许多情况下,可以使用后代选择器来定位相同的元素,而不是使用类.如果可以通过两种方式完成同样的事情,那么决定选项之间的逻辑是什么？
以下是一些示例场景：
1.
一个.
<div class="main">
<div>
<div> /* target */
<div></div>
</div>
</div>
</div>
.main > div > div
湾
<div class="main">
<div>
<div class="content">
<div></div>
</div>
</div>
</div>
.content
2.
一个.
<div class="main">
<div> /* target */
<div></div>
</div>
<div> /* target */
<div></div>
</div>
</div>
.main > div:first-child
.main > div:last-child
湾
<div class="main">
<div class="content1">
<div></div>
</div>
<div class="content2">
<div></div>
</div>
</div>
.content1
.content2
3.
一个.
<div class="main">
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.main > div div
湾
<div class="main">
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
</div>
.content div
决定使用类或后代选择器之间的逻辑是什么？
解决方法
后代选择器允许您避免在html中嵌入类信息.当包装块是逻辑容器时,这可能是方便的.例如,如果您使用div标签构建了一个表,并且您有数百或数千行,则可以通过指定后代样式而不是指定class =’…’来减少文档大小并提高可读性.反复.
<div class='mytable'>
<div></div>
<div></div>
<!-- A LOT MORE ROWS -->
</div>
指定类的优点是您不依赖于特定的排序.每次想要重新排列视图时,必须更改后代标记会非常令人沮丧.指定类的另一个好处是,在使用CSS时,搜索特定的类名要比解密后代块要容易得多.
据我所知,没有黑&每种方法都适用的白色指南.您可以自行决定在设计时考虑每个的好处/不足.
