Блог

Главная - Вопросы по программированию - Правильный способ использовать псевдоселектор css?

Правильный способ использовать псевдоселектор css?

#html #css

#HTML #css

Вопрос:

Я играл с псевдоселекторами и пытался разобраться.

Это общий вид элемента, над которым я пытаюсь работать:

 <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"]

Как бы это было сделано с помощью идентификатора вложения данных изображения вместо href в <a> теге?
И почему?
Это потому, что :before может идти только после последнего элемента, который я ищу?

Комментарии:

1. Пожалуйста, обратите внимание, что фактическая проблема с этой ситуацией здесь заключается в том, что невозможно добавить тексты в img, поскольку img является замененным элементом , и любой контент в нем не может быть показан. Итак … вы не можете использовать ::before or ::after в самом img (это не сработает), и вам приходится довольствоваться отображением дополнительного контента с помощью ::before or ::after в окружающих его элементах.

Ответ №1:

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

Говорит:

1.) найдите элемент с классом «simpleGallery»

2.) найдите тег привязки потомка

3.) нацелитесь на :before псевдоэлемент этого элемента

4.) найдите тег img-потомка этого псевдоэлемента, идентификатор вложения данных которого равен «some_number»

Проблема здесь в том, что псевдоэлементы не являются реальными элементами в dom (следовательно, псевдо), поэтому у них нет дочерних элементов, братьев и сестер, умерших и т.д. итак, ваш селектор недействителен.

Как бы это было сделано с помощью идентификатора вложения данных изображения вместо href в теге?

Именно так, как у вас это есть: img[data-attachment-id="some_number"]