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

Question

给出以下样式表:

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

什么元素被精确的语法选择#cells g:hover path.arc,什么是属性设置的效果display来inherit？

Answer 1

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

当祖先元素具有id时,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带有类.arcon的元素内的文本:hover从父元素继承颜色g.最后值得一提的是,元素path和g是svg元素.

参考

继承