Блог

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

Применение CSS только к родительскому элементу, не касаясь дочернего элемента

#html #css

#HTML #css

Вопрос:

Как я могу скрыть / удалить текст «Категория:» здесь, не касаясь того, что внутри <span> </span> ?

 <h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>

Заранее спасибо.

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

1. Можете ли вы помочь мне понять, почему «Категория» не должна отображаться? Это для программ чтения с экрана?

2. В основном он поставляется со страницами категорий WP по умолчанию, и в моем случае это не нужно

Ответ №1:

Редактировать: я пропустил важную деталь ниже. Как мог заметить другой ответ, попытка сделать что-то вроде display: none и display: initial не сработает.

Как я могу скрыть / удалить текст «Категория:»

Начальное ключевое слово CSS может быть применено к дочерним элементам для сброса стилей. Как упоминается в документе, иногда initial приводит к неожиданным результатам, проверьте его аналоги inherit , unset , и revert . Чтобы привести пример использования цвета текста:

 h1 {
  color: red;
  visibility: hidden;
}

h1 > span {
  color: initial;
  visibility: initial;
} 
 <h1 class="f_p f_700 f_size_50 w_color l_height50 mb_20">
Category:
<span>Men</span>
</h1>

Ответ №2:

Вы можете изменить видимость на скрытую или размер шрифта на ноль для родительского элемента и сбросить его для дочернего элемента. Без привязки каких-либо стилей к дочернему элементу это невозможно с помощью css.

Ответ №3:

Если возможно использовать JS, попробуйте это:

 $("h1").contents().filter(function(){
    return (this.nodeType == 3);
}).remove(); 
 <h1>Category:<span>Men</span></h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Или только с помощью CSS:

 h1 {
 font-size: 0px;
 visibility: hidden;
}

h1 span { 
 font-size: 36px;
 visibility: initial;
}
    
 <h1>Category:<span>Men</span></h1>

Метки: ,