2013-02-05 49 views
3

的CSS類的條件我試圖編輯一個文本顯示方式,當「瀏覽到」與HTML部分ID代碼的幫助。以下是我的代碼片段:如果對條款編號爲

<span class="headerqmain"><ul><li><a href="#ID001">Question</a></ul></li></span> 

<section id="ID001"></section> 
<span class="headerq">Question repeated</span> 
<span class="answerq">Answer to the question</span> 

請注意,有100多個問題,並且頁面底部的答案很長。這意味着當有人點擊這些問題時,他們會將相同的問題及其答案放在下面的列表中。 (這是一個常見問題部分)。但很難看到樹木的森林。

所以我的目標是標記被點擊的問題+答案是跳到。也許用一種顏色或更大的文字大小來標記它。任何人都知道在這種情況下是否可以在CSS上使用條件?記住它的全部在同一頁面上。因爲當跳樓,你可以用你的標記做什麼

+4

您需要使用':target'的css屬性僞類。這與PHP或if語句沒有任何關係 –

回答

1

示例代碼:

:target .headerq { /* :target would refer to #ID001 in this case */ 
    font-size: 1.5em; 
    color: blue; 
} 
:target .answerq { 
    color: blue; 
} 

http://css-tricks.com/on-target/關於該技術的更多信息。同時檢查出http://37signals.com/svn/archives/000558.php黃色褪色技術。這種行爲的一個很好的增強

+0

對不起,最初沒有注意到這一點,你需要在問號和回答跨度周圍包含

,以便它們包含在:target中。如果你出於某種原因不能這樣做,那麼將css選擇器更改爲:target + .headerq和:target + .headerq + .answerq – DMTintner

+0

這可以工作,而且這個工程很棒! 但是,這裏真的很嚇人。 當我在頁面內跳轉,並且由於頁面是CSS元素,跳轉不正確。所以我做的是,我把每個

放在比問題實際上是將答案集中到答案+問題更高的位置。 到目前爲止這麼好,但現在問題是我無法將
圍繞正確的項目,因爲每個給定項目的
高於項目本身。 圍繞這個的任何解決方案? –