Question

我一直在玩伪选择器并试图解决问题。

这是我正在尝试处理的元素的一般外观：

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

我正在尝试将文本显示在具有特定属性的图片上（例如data-attachment-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"]

如何通过<a>标记中的图片数据附件ID代替href来完成？为什么呢？是因为：之前只能追求我要找的最后一个元素吗？

Answer 1

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

说：

1。）找到一个“simpleGallery”类的元素

2.）找到后代锚标记

3。）定位该元素的:before伪元素

4.）找到该伪元素的后代img标签，其data-attachment-id等于“some_number”

这里的问题是伪元素不是dom上的真实元素（因此是伪），因此它们没有子元素，兄弟元素，死者等等，因此您的选择器无效。

如何通过image data-attachment-id而不是href来完成在标签？

具体如何：img[data-attachment-id="some_number"]

使用css伪选择器的正确方法？

1 个答案: