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

发布时间：2020-12-14 18:26:38 所属栏目：资源来源：网络整理

导读：我想更好地理解何时使用类来定位内容而不是其他可用选项,特别是后代选择器. 在许多情况下,可以使用后代选择器来定位相同的元素,而不是使用类.如果可以通过两种方式完成同样的事情,那么决定选项之间的逻辑是什么？以下是一些示例场景： 1. 一个. div class="

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

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

以下是一些示例场景：

一个.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!