gistfile1.css

/* 1 */
body {color: red;} 
p {color: blue;}
/* Answer: Текст будет синим, так как p в данном случае более специфичный селектор */

/* 2 */
p {color: red;} 
.bar {color: blue;}
/* Answer: синий, селектор по классу имеет больший вес */

/* 3 */
p {color: red;} 
.container {color: blue;}
/* Answer: красный, p в данном случае более специфичный селектор */

/* 4 */
body p {color: red;} 
.boo {color: blue;}
/* Answer: синий, селектор по классу имеет больший вес */

/* 5 */
#main {color: red;} 
body .container {color: blue;}
/* Answer: красный, селектор по id имеет больший вес */

/* 6 */
body p {color: red;} 
.container {color: blue;}
/* Answer: красный, селектор body p - более специфичный */

/* 7 */
.container p {color: red;} 
#foo {color: blue;}
/* Answer: синий, селектор по id имеет больший вес */

/* 8 */
.container p {color: red;} 
#main {color: blue;}
/* Answer: красный,  так как .container p в данном случае более специфичный селектор */

/* 9 */
#foo {color: red;} 
body .container p {color: blue;}
/* Answer: красный, селектор по id имеет больший вес */

/* 10 */
div p {color: red;} 
.container p {color: blue;}
/* Answer: синий, селектор .container p имеет больший вес */

/* 11 */
.container p {color: red;} 
div .boo {color: blue;}
/* Answer: синий, вес равен, применится последний */

/* 12 */
div p.bar {color: red;} 
.container p {color: blue;}
/* Answer: красный, селектор div p.bar имеет больший вес */

/* 13 */
p.bar {color: red;} 
p.boo {color: blue;}
/* Answer: синий, вес равен, применится последний */

/* 14 */
#foo {color: red;} 
#main {color: blue;}
/* Answer: красный,  так как #foo в данном случае более специфичный селектор */

/* 15 */
p {color: red;} 
div {color: blue;}
/* Answer: красный,  так как p в данном случае более специфичный селектор */

gistfile2.html

<div id="main" class="container">
    <p id="foo" class="bar boo">Тут будет текст</p>
</div>