CSS選擇器：目標

Question

這是我的HTML：

<p class="define"><a class="term" href="#jump" name="jump">jump</a> - Some description</p> 

當瀏覽器跳轉到#jump我想強調的.define類。如果我做;

a.term:target { background-color: #ffa; -webkit-transition: all 1s linear; } 

我當然只會突出顯示a。我如何修改這個來完成p？我嘗試了一些像下面這樣的變體，但沒有一個能夠工作。

a.term:target .define { stuff here }

a.term:target p.define { stuff here }

a.term:target p { stuff here }

的jsfiddle：http://jsfiddle.net/vVPPy/

Answer 1

不能修改用css的元素的父。你將不得不使用JavaScript的替代品。

Answer 2

您將無法使用CSS確定用戶在頁面上的位置。這可以用JavaScript完成 - 如果你不想重新發明輪子，我建議使用Bootstrap的ScrollSpy。

Answer 3

你的<p>標籤不是任何東西的目標。如果它是：

<p class="define" id="something"> 
    <a class="term" href="#something" name="jump">jump</a> - blah 
</p> 

你可以設置樣式像這樣：

a.term:target { background-color: #ffa; } 

但無關與<a>實際被點擊。您需要使用onclick處理程序，理想情況下將類添加到目標，並根據該類添加樣式。