У меня есть список HTML, например:
<ul>
<li class="heading">Heading 1</li>
<li class="heading">Heading 2</li>
<li>Text Under Heading 2</li>
</ul>
Поскольку в заголовке 1 нет текста, я хочу скрыть его с помощью CSS.
Если я это сделаю,
li.heading + li.heading { display: none; }
он скрывает заголовок 2 вместо заголовка 1.
Как я могу скрыть заголовок 1? Есть ли способ поиска смежных братьев и сестер и выбрать первый?
Невозможно использовать CSS, который в настоящее время определен и реализован. Для этого потребуется селектор, который выбирает элемент на основе своих братьев и сестер после него. Селекторы CSS могут выбирать элемент на основе предшествующих или внешних элементов, но не на основе следующих или внутренних элементов.
Желаемый эффект может быть достигнут с использованием JavaScript довольно простым способом, и вы можете решить, в зависимости от цели, удалить ли элементы из дисплея или полностью удалить их из дерева документов.
Можно назначить первого брата с помощью CSS с некоторыми ограничениями.
Для примера в вопросе это можно сделать с помощью чего-то вроде этого
li.heading { display: none; } /* apply to all elements */
li.heading + li.heading { display: list-item } /* override for all but first sibling */
Это работает, но требует, чтобы вы могли явно установить стили для братьев и сестер, чтобы переопределить настройку для первого ребенка.
Есть несколько способов скрыть только "Заголовок 1":
ul li:first-child {display:none;}
В качестве альтернативы:
li.parent{ display: none; }
li.parent + li.parent { display: list-item; }
Кроме того, <li>Child of Heading 2</li> не является дочерним элементом <li class="parent">Heading 2</li>. Это брат.
Официальный CSS3 Spec в настоящее время не поддерживает ничего подобного, хотя я понимаю, что это было бы полезно.
Я бы попытался выполнить поиск некоторых готовых javascript или jquery скриптов/библиотек для добавления селекторов css. Хотя я никогда ничего не встречал.
Если вы столкнулись с чем-то, отправьте его здесь.
Если вы ничего не нашли, вы можете просто сделать это вручную или попробовать найти совершенно другое решение.
Хотелось бы, чтобы у меня был лучший ответ для вас. Извините: (
попробуйте использовать js для getElementsby Classname и если больше 1, используйте css:
ul li: first-child {display: none;}
Я знаю, что этот вопрос уже имеет действительный выделенный ответ, но, возможно, другие люди хотят использовать мое решение только для css:
Я хотел иметь список предупреждений (в данном случае бутстрэп-оповещений) в контейнере и их границу для развала. Каждое предупреждение имеет радиус границы, который выглядит довольно глупым, когда все они находятся в одном контейнере. Таким образом, с margin-top: -1px я сделал свои границы крахом. В качестве следующего шага мне пришлось изменить стили первого, каждого предупреждения в промежутке и последнего предупреждения. И это также должно выглядеть хорошо для одного предупреждения, двух предупреждений и предупреждений n.
.alert {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
margin: 0;
}
// set for the first alert that it should have a rounded top border
.alert:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
// set for the last alert that it should have a rounded bottom border
// if there is only one alert this will also trigger it to have a rounded bottom border aswell
.alert+.alert:last-child {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders
.alert+.alert:not(:last-child) {
margin-top: -1px;
border-radius: 0;
}
// for each following alert in between we remove the top rounded borders and make their borders collapse
И вот шаблон angular для нескольких предупреждений.
<div id="alertscontainer">
<div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class">
{{alert.body}}
</div>
</div>
Использование :first-of-type
Вы можете прочитать больше здесь