Specificity of CSS selectors

Which of the following selectors has the highest specificity?

by Dmytro Chumak

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h2>Specificity of a complex selector</h2>
<main id="container-1" class="container">
  <section id="section-1" class="section">
    <p id="paragraph-1" class="paragraph">To understand which level of priority selectors has, we need to use "id | class | type/pseudo_element" system:<br>   "#container-1 #paragraph #paragraph-1" - 3 | 0 | 0 table.<br>   
"#container-1 #paragraph #paragraph-1" - 2 | 2 | 1 table.<br>  
"#container-1 #paragraph #paragraph-1" - 2 | 0 | 2 table.</p>
  </section>
</main>

CSS

body,
p {
  padding: 1em;
}

/* Uncomment the properties to check yourself */
#container-1 #section-1 #paragraph-1 {
  /* background: yellow; */
}

body #container-1 .section #paragraph-1.paragraph {
  /* background: blue; */
}

#container-1 #section-1 .paragraph:hover {
  /* background: green; */
}