javascript - 具有多个字段和 "display"属性的 CSS 选择器

Question

给定以下样式表:

#cells g:hover path.arc {
  display: inherit;
}

使用语法 #cells g:hover path.arc 精确选择了哪些元素以及将属性 display 设置为 inherit< 的效果是什么 ?

Answer 1

what elements are precisely being selected with the syntax #cells
g:hover path.arc:

当祖先元素具有 id cells 时，path 类的所有子元素 .arc 悬停在 g 元素中.

what is the effect of setting the property display to inherit

inherit CSS-value 使指定它的元素从其父元素中获取属性的计算值。每个 CSS 属性都允许使用它。

下面的代码演示了效果:

#cells g:hover path.arc {
  color: inherit;
}
path.arc {
  color: red;
  font-size: 18pt;
  font-weight: bold;
}
g {
  color: green;
}

<div id="cells">
  <g>
    <path class="arc">test</path>
  </g>
</div>

:hover 上带有类 .arc 的元素 path 中的文本继承父元素 g 的颜色.最后值得一提的是要素path和 g是svg元素。

引用资料

inherit