css - Css匹配所有与祖先具有相同班级的孩子

Question

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

鉴于此html：

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

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

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

Answer 1

Only if you know the name of the class:

.foo .foo {  }

my question is whether you can capture my class is the same as my parent's class with some kind of css magic

No. (Maybe with LESS or SASS, but I'm not sure).

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>

示例（图片）

第 n 个子 CSS3 属性