Css selecting canvas nested element

Question

I

Id like to select canvas element for styling purposes but I can get it done, is it due to fact that this is generated in flight and css wont see it after its generated?

I tried 'copy selection'

#drawing > div > div > canvas

but its also not working, the only way im able to add style is with use of developer tools..

#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;
}

this is my css file none of this seems to work..

Answer 1

Check this page out , you are not using the selector correctly:

The element>element selector is used to select elements with a specific parent.

Note: Elements that are not directly a child of the specified parent, are not selected.

So, Try drawing > pdf-viewer > div > div > canvas instead.

Edit 1: Now that you added your CSS file, if you want to select an element whose tag-name is drawing , then you don't need to prefix that tag-name with either a . or a # (the former is for selecting elements with a specific class-name, the latter is used to select an element with a specific ID).

Also, try this out and see if it works:

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

The example above results in this when I try it out (even without the !important s, so if it doesn't work for you, the issue is not with your CSS, you are probably overriding the styles somewhere else in your code):

Answer 2

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