html – CSS类和后代选择器实践

我想更好地理解何时使用类来定位内容而不是其他可用选项,特别是后代选择器.

在许多情况下,可以使用后代选择器来定位相同的元素,而不是使用类.如果可以通过两种方式完成同样的事情,那么决定选项之间的逻辑是什么？

以下是一些示例场景：

一个.

<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

一个.

<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

一个.

<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时,搜索特定的类名要比解密后代块要容易得多.

据我所知,没有黑&每种方法都适用的白色指南.您可以自行决定在设计时考虑每个的好处/不足.

html – CSS类和后代选择器实践

解决方法

猜你在找的HTML相关文章