css 如何选择第一个相邻的同级?

72qzrwbm  于 2023-03-14  发布在  其他
关注(0)|答案(9)|浏览(259)

我有一个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?是否有方法查找相邻的同级并选择第一个?

xbp102n0

xbp102n01#

可以使用CSS定位第一个同级,但有一些限制。
对于问题中的示例,可以使用类似以下的方法

li.heading { display: none; }                   /* apply to all elements */
li.heading + li.heading { display: list-item }  /* override for all but first sibling */

这是可行的,但要求您可以显式设置同级的样式以覆盖第一个子对象的设置。

svgewumm

svgewumm2#

使用当前定义和实现的CSS是不可能的。它需要一个选择器,该选择器基于元素后面的兄弟元素来选择元素。CSS选择器可以基于前面或外部元素来选择元素,但不能基于后面或内部元素来选择元素。
使用JavaScript可以以一种相当直接的方式获得所需的效果,您可以根据目的决定是从显示中删除元素还是从文档树中完全删除它们。

thigvfpy

thigvfpy3#

现在这是可能的

li:first-of-type {
    display: none;
}

这将匹配第一个li标记。

li:first-of-type:not(:only-of-type) {
    margin: 10px;
}

如果你想要更多的控制--比如只在有更多项的时候在两个项之间添加空格,上面的方法就可以起作用。混合伪选择器会非常强大。https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

ds97pgxw

ds97pgxw4#

有几种方法可以仅隐藏“标题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>的子级,而是同级。

fjnneemd

fjnneemd5#

现在可以将:has() pseudo-classadjacent sibling combinator ( + )配合使用。
函数:has() CSS伪类表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时与至少一个元素匹配。此伪类提供了一种通过将相对选择器列表作为参数来选择父元素或相对于引用元素的上一个同级元素的方法。

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
  margin-bottom: 0;
}

对于您的示例,您可以用途:

li.heading:has(+ li.heading) { display: none; }

请注意,这个伪类还是非常新的,是not yet fully supported by all major browsers(例如Firefox)。

r6vfmomb

r6vfmomb6#

使用:first-of-type
你可以阅读更多here

odopli94

odopli947#

尝试使用JS来getElementsby类名,如果多于1个,则使用CSS:

ul li:first-child {display: none;}
zbwhf8kr

zbwhf8kr8#

官方的CSS3规范目前并不支持这样的东西,尽管我确实意识到它会很有用。
我会尝试搜索一些预先构建的JavaScript或jQuery脚本/库来添加CSS选择器,尽管我从来没有遇到过任何东西。
如果您没有找到任何东西,您可能只是手动操作,或尝试找到一个完全不同的解决方案。

4xrmg8kj

4xrmg8kj9#

我知道这个问题已经有了一个有效的标记答案,但也许其他人想使用我的css解决方案:
我想在一个容器中有一个警报列表(在本例中是引导警报),并折叠它们的边界。每个警报都有一个边界半径,当它们都在一个容器中时,这看起来相当愚蠢。-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>

相关问题