沒有Javascript的照相館

我目前正試圖在我的主頁上實現一個照片庫而不使用JS。沒有Javascript的照相館

我在線下面的代碼，但我不明白中間的線正在做什麼。

.image-gallery .big-image a:target img {display:block;} 
.image-gallery .big-image a:target ~ img#default {display:none; width:1px;} 
.image-gallery .big-image img#default {display:block;}

代字號應該連接父（a：目標）和#default圖像。我知道目標應該做什麼，但a應該做什麼target？爲什麼我需要它？

來源

2014-06-25 user3776864

請張貼您的標記。 a：target〜img＃默認意味着這兩個元素是彼此不相鄰的同胞，但在同一級別上。 – Michael

代字號（即'〜'）選擇符選擇一個元素在其之前的某個元素。但就你而言，我不確定你爲什麼要使用一個id的元素。 – Aeveus

由於您沒有提供標記，因此很難提供具體的答案。但是，以下文章應該提供必要的信息來確定〜和：目標選擇器。

http://css-tricks.com/almanac/selectors/t/target/

http://css-tricks.com/almanac/selectors/g/general-sibling/

從被提供了什麼我最好的猜測是：目標被用來深層鏈接直接在畫廊的圖像。例如，如果用戶要轉到圖庫中的圖片3，則URL可能會更改爲/ gallery＃3。如果他們共享該網址，圖庫將自動轉到圖庫中的第三張圖片。如果用戶深度鏈接到圖像，「〜img＃默認」可能會隱藏默認啓動圖像。再一次，這只是一個猜測，因爲沒有提供標記。

來源

2014-06-25 20:41:48 Jason

沒有Javascript的照相館

回答

相關問題