如何从相同的嵌套div中选择特定的HTML元素

Question

我需要选择一个特定的HTML元素，它们是相同的，也包含在几个相同的<?php内，我尝试使用div，但它没有用。 （每个孩子共享相同的属性并进行细微更改）

HTML

nth-child()

CSS

<div class="disc">
  <div class="disc_PF">
  </div>
</div>
<div class="disc">
  <div class="disc_PF">
  </div>
  <div class="disc_PF">
  </div>
</div>

当我使用它时，它会选择第一个.disc .disc_PF:nth-child(1) {} 元素，

CSS

disc_PF

当我使用它时，它选择第三个.disc .disc_PF:nth-child(2) {} 元素，

如何单独选择单个嵌套元素？

由于

Answer 1

这是你怎么做的。

＆＃13;

＆＃13;

.disc_PF
{
  width: 50px;
  height: 50px;
}

/* First .disc, all .disc_PF */
.disc:nth-of-type(1) > .disc_PF
{
  background: red;
}
/* Second .disc, first .disc_PF */
.disc:nth-of-type(2) > .disc_PF:first-child
{
  background: green;
}
/* Second .disc, .disc_PF that is the second child element */
.disc:nth-of-type(2) > .disc_PF:nth-child(2)
{
  background: yellow;
}
/* Second .disc, last .disc_PF */
.disc:nth-of-type(2) > .disc_PF:last-child
{
  background: blue;
}

＆＃13;

<div class="disc">
  <div class="disc_PF">
  </div>
</div>
<div class="disc">
  <div class="disc_PF">
  </div>
  <div class="disc_PF">
  </div>
  <div class="disc_PF">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

第N个孩子从元素的父母开始计数，所以如果你有两个来自不同父母的元素，每个元素都是自己父母的第二个孩子，你将会选择这两个元素。

试试这个：

.disc:nth-child(2) .disc_PF:nth-child(1) {}

Answer 3

＆＃13;

＆＃13;

.disc_PF
{
 width:100px;
 height:100px;
 float: left;
}

/* 1st .disc, all .disc_PF */
.disc:nth-of-type(1) > .disc_PF
{
  border:1px solid #ccc;
  background:#ccc;
}
/* 2nd .disc, 1st .disc_PF */
.disc:nth-of-type(2) > .disc_PF:first-child
{
  border:3px double #111;
}
/* 2nd .disc, 2nd .disc_PF  */
.disc:nth-of-type(2) > .disc_PF:nth-child(2)
{
  border:1px solid #0f0;
}
/* 2nd .disc, 3rd .disc_PF */
.disc:nth-of-type(2) > .disc_PF:last-child
{
  border:1px solid #00f;
}

＆＃13;

<div class="disc">
  <div class="disc_PF">
  1st disc_PF
  </div>
</div>
<div class="disc">
  <div class="disc_PF">
  2nd disc_PF
  </div>
  <div class="disc_PF">
  3rd disc_PF
  </div>
  <div class="disc_PF">
  4th disc_PF
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

:nth-of-type()和:nth-child仅适用于元素名称，而不适用于类名。换句话说，

.classname:nth-child(2) 

不起作用，但

div:nth-child(2)

一样。同样，.my-class:first-child()之类的内容

鉴于您的代码示例，您拥有的唯一选项是向元素添加ID，或根据其位置（第一个孩子等）选择任何.my-class。