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

鉴于这个网站：

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

是否有可能写一个选择，以匹配刚刚老二格的基础上，具有相同类作为它的父呢？

注意：我知道如何写一个选择的这个例子HTML中的第二个div，我的问题是你是否可以捕捉我的课是一样的我的父母有某种CSS魔法类。

来源

2012-08-07 spike

据我所知，这将需要额外的逻辑超越CSS的正常范围。我建议通过jQuery来做这件事。 – ToddBFisher 2012-08-07 19:00:17

@ToddBFisher在我的特殊情况下，我无法使用javascript。 – spike 2012-08-07 19:02:10

只有当你知道类的名称：

.foo .foo { }

我的问题是你是否能抓住我的课是一样的我的父母有某种CSS的魔术类

第（也许与LESS或SASS，但我不知道）。

来源

2012-08-07 18:53:06 bfavaretto

少和sass编译为css，所以他们必须<= css权力，对吧？或者你的意思是在JavaScript解释器中运行less/sass（我正在使用sass，但是已经预编译） – spike 2012-08-07 19:05:25

不确定你在'<= css in power'中的含义......无论如何，我并不是指它们在JS解释器。我说“也许”，因为我从来没有真正使用过更少和更少，所以我不知道可以做什么和不能做什么。 – bfavaretto 2012-08-07 19:09:47

我的意思是说，它们都编译为css文件（浏览器只能解析css，不能解析更少或sass），所以它们的表达必须<= css。有一个单独的（我认为，我从来没有用过它）的方式来运行它们，你从JavaScript代码加载sass或更少的文件，这将为您在css中无法实现的功能提供潜力。 – spike 2012-08-07 19:15:24

<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

来源

2012-08-07 18:54:28

@爱德华Ruchevits我想你错过了我的问题的症结。我不想在我的CSS中需要硬编码'foo'。 – spike 2012-08-07 19:14:45

@spike哦，那么这是不可能的，如前所述。 :) – 2012-08-07 19:20:40

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

回答

相关问题