Question

当我们有一个唯一的父元素并且其中有一些不同的（不相关的）子元素时，它们是定义和应用样式的首选方法吗？

＆＃13;

#parentCon
{
  declarations...
}
/* 1. Following is unnecessary, even looks somewhat weird 
but it might give a clue about relation to developer. */
#parentCon #child1
{
  declarations...
}


/* 2. Apply directly to child by its id. 
They are defined consecutively so developer have a clue 
about their relation, indentation will also help. */
#parentCon
{
  declarations...
}
  #child1
  {
    declarations...
  }

/* 3. Use a class for child although child is unique, 
there will be no other instances of it. */
#parentCon .child1
{
  declarations...
}

＆＃13;

<div id="parentCon">
  <div id="child1">
  </div>
  <div id="child2">
  </div>
</div>

<div id="parentCon">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

＆＃13;

使用类选择器是否合理，尽管只有一个实例？使用课程时浪费的表现怎么样？我正在尝试学习关于在这里使用儿童身份证的用例想法，所以这不是关于特定的父子问题。

Answer 1

在这种情况下，我不会考虑性能，浏览器非常适合优化它。

最大的不同是可重用性。

如果该元素在文档中是唯一的，请使用ID。如果要重用该样式，请使用class。

#parentCon #child1很有意思。它可能看起来很奇怪，但有意义。仅当#child1为#parentCon的子项时，才将此样式应用于#child1。如果您要动态生成页面并在页面中移动DefaultHttpClient可能是一个有趣的想法。

Answer 2

仅使用id来定义每页应用程序（JS）唯一选择器（请记住，DOM中只能有一个具有相同id值的元素）。

在这种情况下，#id1 #id2无用且难以多次使用。 #id2将是一样的，但同样，我会使用基于类的样式。

例如：.myModule .myElement，其中myModule是复杂对象的父级，让我们说旋转木马，图像框架或其他什么，myElement是此内的特定元素{ {1}}。

Answer 3

id是一个唯一标识符，如果你想多次使用它，那么使用class not id。

这是一个很好的指南： CSS Selectors Guide 基本上你正在寻找：

号码：第n个孩子（2）选择作为其父
的第二个子元素的每个

元素

将＃替换为。

.parentCon：nth-child（2）div：nth-child（1）将是第二个parentCon的第一个div

祝你好运

Answer 4

如何使用简单的子选择器，例如

#parentCon div {declarations}
#parentCon > div {declarations}

两者之间的巨大差异......

将在#parentCon中选择任何和所有div的后代。这包括div中的div。
```
<div id="parentCon"> 
 <div class="random"> 
  <div class="child-of-random"> 
  </div> 
 </div> 
</div>
```
换句话说，您声明的声明将适用于"child-of-random"以及"random"。
只会选择#parentCon的DIRECT后代div，所以只有"random"。

这允许您以编程方式定位子项。更重要的是，如果您想针对个别孩子，您可以使用:first-child / :last-child选择器。此外，您可以使用nth-child选择器定位特定的孩子。

有关第n个孩子选择器的更多信息的宝贵资源：https://css-tricks.com/how-nth-child-works/

子元素的ID选择器

4 个答案: