在Firefox中为我的userChrome.css编写CSS代码时,我在使用:is()伪类来缩短相邻的sibling 组合子表达式时遇到了一个问题.

以下代码不适用于:is()内的第二个元素,即#tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button.

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([selected], [multiselected]) + :is(.tabbrowser-tab:not([selected], [multiselected]), #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button) {
  border-left: 1px solid rgb(0, 0, 0, .2) !important;
}

但是,删除> #tabs-newtab-button时,:is()可以正常工作.然后,它将 Select 元素#tabbrowser-arrowscrollbox-periphery.

而且,当不像这样使用:is()伪类时,它可以工作:

#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([selected], [multiselected]) + .tabbrowser-tab:not([selected], [multiselected]),
#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:not([selected], [multiselected]) + #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
  border-left: 1px solid rgb(0, 0, 0, .2) !important;
}

我的问题是:这是意料之中的行为,还是Firefox中:is()伪类的实现中的错误?

推荐答案

这两个 Select 器并不相同.以下是一个可供理解的简化版本:

a + b > c {
  color: red;
}

a + :is(b > c) {
  font-size: 500px; /* this will not have any effecy*/
}
<a></a>
<b><c>text</c><b>

第二种情况等效于a + *:is(b > c),因此您将 Select aisc元素的任何同级元素,该元素具有直接父元素b

a + b > c {
  color: red; /* this will not have any effecy*/
}

a + :is(b > c) {
  font-size: 50px; 
}
<b>
<a></a>
<c>text</c>
</b>

Css相关问答推荐

在Angular mat-drawer组件中防止在mat-drawer-innercontainer中添加滚动条

如何取消 CSS 伪类中的属性设置?

Bootstrap 和 Sass:将 SCSS 文件转换为 CSS 时出错.错误:$theme-colors-rgb 中未定义变量 @each $color、$value

如何减少弹性项目之间的差距

使用带有 fr 单位的 calc 函数

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

使用 React JS 和自定义 CSS 创建 Cookie 横幅

如何使用 ReactJS 使用 CSS 设置 map 容器的样式

将框架放入 bootstrap 模式的正确方法是什么?

使用 css 网格和 nth-child 交替行

使用 CSS 填充悬停过渡的闪烁文本问题

卡在 CSS 中的grid-template-columns中

使用之前和之后为锚标签添加画笔描边效果

如何使单选按钮看起来像切换按钮

中心表单提交按钮 HTML / CSS

什么是 ::content/::slotted 伪元素,它是如何工作的?

Angular 5 在某些类中添加了ng-star-inserted - 那是什么?

继承了哪些 CSS 属性?

为什么浏览器会为 CSS 属性创建供应商前缀?

从 textarea 中删除所有样式(边框、发光)