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匹配與祖先相同級別的所有孩子

回答

相關問題