CSS选择画布嵌套元素

Question

一世

我想选择用于样式目的的canvas元素，但我可以完成它，是否是由于它是在飞行中生成的，而CSS在生成后看不到它呢？

我尝试了“复制选择”

#drawing > div > div > canvas

但它也不起作用，无法添加样式的唯一方法是使用开发人员工具。

#drawing  div  canvas {
  border: 10px solid #22cc37;
  padding: 100px;
}


div.ng2-pdf-viewer-container > div > canvas {
  padding: 100px;
  border: 10px solid #22cc37;

}

drawing > pdf-viewer > div > div > canvas {
  border: 10px solid #22cc37;
}

.drawing .ng2-pdf-viewer-container{
  border: 10px solid #22cc37;
}

drawing pdf-viewer div div canvas {
  border: 10px solid #22cc37;
}

.drawing .pdf-viewer div div canvas {
  border: 10px solid #22cc37;
}

这是我的css文件，这似乎都不起作用。

Answer 1

签出此页面 ，说明您未正确使用选择器：

element>element选择器用于选择具有特定父元素的元素。

注意：不会直接选择不是指定父级的子级的元素。

因此，请改用drawing > pdf-viewer > div > div > canvas 。

编辑1：现在添加了CSS文件，如果要选择标记名称为drawing的元素，则无需在该标记名称前添加前缀. 或# （前者用于选择具有特定类名的元素，后者用于选择具有特定ID的元素）。

另外，尝试一下，看看是否可行：

drawing  div  canvas {
  border: 10px solid #22cc37 !important;
  padding: 100px !important;
}

上面的示例在我尝试时会导致这种情况（即使没有!important ，也是如此，如果它对您不起作用，则问题不在您的CSS上，您可能会覆盖代码中其他地方的样式）：

Answer 2

删除>可以解决该问题，因为您基本上可以说它不能是直接子代，但是可以跳过某些子代。