Блог

Главная - Вопросы по программированию - Псевдоэлемент CSS — предназначен только для текущего элемента, а не для потомка

Псевдоэлемент CSS — предназначен только для текущего элемента, а не для потомка

#css #selector #pseudo-element

#css — код #селектор #псевдоэлемент

Вопрос:

Как настроить таргетинг на псевдоэлемент для текущего элемента, но не на дочерний псевдоэлемент?

структура HTML-кода:

 <label
   <input/>
</label>

css -код:

 .main-0-6-18 >input::before {
    /* the pseudo on children */

    display: block;
    height: 100%;
    width: 100%;
    content: "";
    /* blah-blah */
}

.main-0-6-18::before {
    /* the pseudo on parent */

    /* affects on children too */

    content: " ";
    display: inline;
    width: 0;
    overflow: hidden;
    visibility: hidden;
}

Я пробовал использовать .main-0-6-18>::before , но это не сработало.

введите описание изображения здесь

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

1. не используйте один и тот же класс для обоих

2. ах да, я забыл удалить класс для дочерних элементов. Спасибо

3. Вы можете обнаружить, что браузеры не «разрешают» псевдоэлемент перед вводом элемента.

4. я установил appearance:none для элемента ввода, поэтому он ведет себя как обычный div / span.

Ответ №1:

Как говорится в документации :

В CSS ::before создает псевдоэлемент, который является первым дочерним элементом выбранного элемента.

В вашем случае вы используете один и тот же класс, поэтому он нацелен на все элементы этого класса.

Родительский псевдоэлемент не повлияет на дочерний псевдоэлемент

 .parent::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid black;
}
.child::before {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  background-color: red;
} 
 <div class="parent">
  <div class="child"></div>
</div>