Ответы к каждому заданию - после задания. Там же и описание "почему так"

CSSColors.html

<style>
/* 1 */
body {color: red;} 
p {color: blue;}
/* Answer: --- 
blue - тег p переопределяет цвет
*/
 
/* 2 */
p {color: red;} 
.bar {color: blue;}
/* Answer: --- 
blue - {0, 0, 1, 0} blue > {0, 0, 0, 1} red
*/
 
/* 3 */
p {color: red;} 
.container {color: blue;}
/* Answer: ---
red - тег p переопределяет цвет
*/
 
/* 4 */
body p {color: red;} 
.boo {color: blue;}
/* Answer: --- 
blue - {0, 0, 1, 0} blue > {0, 0, 0, 2} red

(в тоже время, если написать:
body p {color: red;} 
p {color: blue;}
цвет станет red, так как {0, 0, 0, 2} > {0, 0, 0, 1}, 
несмотря на то, что описание blue располагается ниже по коду
)
*/
 
/* 5 */
#main {color: red;} 
body .container {color: blue;}
/* Answer: ---
red - {0, 1, 0 0} > {0, 0, 1, 1} 
*/
 
/* 6 */
body p {color: red;} 
.container {color: blue;}
/* Answer: --- 
red - тег p переопределяет цвет (так как он был задан для родителя как blue)
*/
 
/* 7 */
.container p {color: red;} 
#foo {color: blue;}
/* Answer: --- 
blue - {0, 1, 0, 0} > {0, 0, 1, 1}
*/
 
/* 8 */
.container p {color: red;} 
#main {color: blue;}
/* Answer: --- 
red - первый селектор явно указывает на тег p -> переопределение свойства color у дочернего элемента (более раскрытое определение фразы "тег p переопределяет цвет")
*/
 
/* 9 */
#foo {color: red;} 
body .container p {color: blue;}
/* Answer: --- 
red - {0, 1, 0, 0} > {0, 0, 1, 2}
*/
 
/* 10 */
div p {color: red;} 
.container p {color: blue;}
/* Answer: --- 
blue - {0, 0, 1, 1} > {0, 0, 0, 2}
*/
 
/* 11 */
.container p {color: red;} 
div .boo {color: blue;}
/* Answer: --- 
blue - так как "веса" равны: blue {0, 0, 1, 1} == red {0, 0, 1, 1}, 
то будет использовано свойство описанное последним в порядке следования 
*/
 
/* 12 */
div p.bar {color: red;} 
.container p {color: blue;}
/* Answer: --- 
red - {0, 0, 1, 2} > {0, 0, 1, 1}
*/
 
/* 13 */
p.bar {color: red;} 
p.boo {color: blue;}
/* Answer: --- 
blue - так как "веса" равны: blue {0, 0, 1, 1} == red {0, 0, 1, 1}, 
то будет использовано свойство описанное последним в порядке следования
*/
 
/* 14 */
#foo {color: red;} 
#main {color: blue;}
/* Answer: --- 
red - дочерний элемент переопределяет родительское свойство
*/
 
/* 15 */
p {color: red;} 
div {color: blue;}
/* Answer: --- 
red - дочерний элемент переопределяет родительское свойство
*/
</style>
<div id="main" class="container">
    <p id="foo" class="bar boo">Тут будет текст</p>
</div>