具有多个字段和“显示”属性的CSS选择器

Question

给出以下样式表：

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

使用语法#cells g:hover path.arc精确选择了哪些元素，将属性display设置为inherit会产生什么影响？

Answer 1

  

使用语法#cells g:hover path.arc精确选择哪些元素：

当祖先元素的标识为path时，所有带有.arc类的子元素g悬停在cells个元素中。

  

将属性显示设置为继承

的效果是什么

继承CSS值使得指定它的元素从其父元素中获取属性的计算值。它允许在每个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>

path上.arc的元素:hover内的文字继承了父元素g的颜色。最后值得一提的是，元素path和g是svg元素。

<强>参考

inherit