Question

我不认为这是可能的，但我希望被证明是错误的。

鉴于此html：

<div class='foo'>
  <div class='bar'></div>
  <div class='foo'></div>
</div>

是否有可能编写一个选择器来匹配第二个子div，基于它与其父级具有相同的类？

注意：我知道如何为这个示例html编写第二个div的选择器，我的问题是你是否可以捕获我的类与我父类的相同用某种css魔法。

Answer 1

只有您知道班级的名称：

.foo .foo {  }

我的问题是你是否可以通过某种css魔法来捕捉我的班级与我父班级相同

不。（或许与LESS或SASS，但我不确定。）

Answer 2

<style>
.foo { display: block; width: 300px; background: #eee; float: left; margin-right: 50px; }
.foo .bar { display: block; width: 300px; height: 100px; background: #ccc; float: left; }
.foo .foo { display: block; width: 300px; height: 100px; background: #ddd; float: left; }

.foo > .foo:nth-child(2) { color: red; }
</style>

<div class='foo'>
  <div class='bar'>A 1</div>
  <div class='foo'>A 2</div>
  <div class='bar'>A 3</div>
  <div class='foo'>A 4</div>
</div>

<div class='foo'>
  <div class='bar'>B 1</div>
  <div class='foo'>B 2</div>
  <div class='foo'>B 3</div>
  <div class='foo'>B 4</div>
</div>

<div class='foo'>
  <div class='foo'>C 1</div>
  <div class='bar'>C 2</div>
  <div class='bar'>C 3</div>
  <div class='foo'>C 4</div>
</div>

Example (image)

nth child CSS3 property

Css匹配所有与祖先相同的孩子

2 个答案: