Css选择画布嵌套元素

Question

我

​

我想选择画布元素的样式，但我可以做到这一点，这是因为这是在飞行和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

Check this page out，您没有正确使用选择器：

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

删除>应该可以解决这个问题，因为您基本上会说它不能是直接的子项，但它可能会跳过一些子项。