這是如何工作的？

這位來自印度的傢伙Motyar來自網站：http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.html 顯示了一個非常不錯的純css方法來隱藏和顯示div。但我似乎無法理解它。這裏是代碼，請向我解釋這個，給一個新手。這是如何工作的？

的HTML（不是我的代碼）：

<div id="lightbox"> 

       <a href="#">Hide me</a><br /> 
       Hi!! <br /> 

       i am the lighbox 

</div> 

<a href="#lightbox" >Show the lighbox</a>

的CSS（不是我的代碼）：

#lightbox { 
     display:none; 
    } 

/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */ 

#lightbox:target { 
     display:block; 
     }

請全面地給我講解一下。謝謝:)

來源

2013-01-16 JohnSmith

不是什麼重申別人已經做過：http://css-tricks.com/on-target/ –

在CSS中，:target放在一個CSS令牌之後，比方說，#lightbox意味着你的規則#lightbox:target的內部代碼進行評估，當且僅當你的頁面的URL後面附加例如#lightbox， http://www.stackoverflow.com/#lightbox。

#lightbox:target { display:block; }

來源

2013-01-16 07:36:32

我可以給你我的解釋在這種情況下，下面的代碼會被瀏覽器進行評估關於這個如何工作，請糾正我，因爲這是一個我無法過去的地方。首先顯示「#lightbox a href text」，它指向div id #lightbox。然後將它重定向到該div，然後使「href文本現在顯示爲」＃「」。這是我卡住的地方。這怎麼可能，爲什麼「a href」變成「＃」？ – JohnSmith

（凹凸）（凹凸） – JohnSmith

如果您在'''標籤前加'''標記（例如'href ='＃lightbox''）來設置'href'屬性，您的瀏覽器將解釋此作爲HTML定位器（請參閱http://www.w3.org/TR/html401/struct/links.html#h-12.2.3「），允許您在頁面中的元素之間導航而不刷新它，這就是爲什麼你的瀏覽器不會刷新頁面，而是在給定的id後加上一個'＃'字符來代替。 –

關鍵是:target僞選擇器。它符合主動錨（在這種情況下爲#lightbox）。

你可以閱讀更多關於此這裏：http://css-tricks.com/on-target/

來源

2013-01-16 07:36:06

由於the W3 Selectors Level 3 Recommendation：

例子：

p.note：目標

這個選擇代表類值得注意的AP元素這是引用URI的目標元素。

因此，當你點擊#lightbox，在lightbox - 元素成爲你的URI的目標。

僞選擇器可以識別此並應用適當的樣式。

來源

2013-01-16 07:36:13

這是如何工作的？

回答

相關問題