正確的方式來使用CSS僞選擇器？

這是該元素的一般看我想工作：

<div class=simpleGallery> 
    <a href="..."> 
     <img data-attachment-id="some_number" ........> 
    </a> 
</div>

我試圖讓文字顯示與特定屬性（數據連接-ID爲例）圖片。我設法通過搜索以獨特方式結束的href來獲得它。像這樣...

.simpleGallery a[href$="GP120094-1.jpg"]:before{ 
content:'Hokus Pokus'; 
position:absolute; 
bottom:25%; 
opacity:0; 
width:100%; 
text-align:center; 
color:#fff; 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-moz-transition: all 1.2s ease; 
-webkit-transition: all 1.2s ease; 
transition: all 1.2s ease; 
}

然後我得到的文本與顯示：

.simpleGallery a:hover:before{ 
opacity:1; 
z-index:1; 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
}

它所有的作品，但我想知道爲什麼它不會像這樣工作：

.simpleGallery a:before img[data-attachment-id="some_number"]

它將如何通過圖像data-attachment-id代替<a>標籤中的href完成？
爲什麼？
這是因爲：之前只能在我尋找的最後一個元素之後去？

來源

2016-10-19 Ivan Horvatin

請注意，在這裏這種情況下，實際的問題是，它是不可能的文本添加到IMG，由於IMG是_replaced element_，並在它的任何內容無法顯示。所以......你不能在img本身上使用':: before'或':: after'（它不會工作），你不得不使用':: before'或':: after來顯示額外的內容'圍繞它的元素。 –

.simpleGallery a:before img[data-attachment-id="some_number"]

是說：

1）找到與類「simpleGallery」

2）找到一個傳人錨標記

3）的元素目標該元素的:before僞元素

4.）找到該僞元素的後代img標籤，它是data-attachment-id i s等於「some_number」

這裏的問題是僞元素不是dom（因此是僞）的真實元素，所以他們沒有孩子，兄弟姐妹，死者等等，所以你的選擇器是無效的。

它將如何通過圖像data-attachment-id而不是標籤中的href 來完成？

到底你有它：img[data-attachment-id="some_number"]

來源

2016-10-19 21:57:46 Pat

正確的方式來使用CSS僞選擇器？

回答

相關問題