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

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

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

以下是一些示例场景：

1.

一个.

<div >     <div>         <div> /* target */             <div></div>         </div>     </div></div>.main > div > div

湾

<div >     <div>         <div >             <div></div>         </div>     </div></div>.content

2.

一个.

<div >     <div> /* target */        <div></div>     </div>     <div> /* target */        <div></div>     </div></div>.main > div:first-child.main > div:last-child

湾

<div >     <div >        <div></div>     </div>     <div >        <div></div>     </div></div>.content1.content2

3.

一个.

<div >     <div>         <div></div>         <div></div>         <div></div>     </div></div>.main > div div

湾

<div >     <div >         <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 – CSS类和后代选择器实践所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。