I have a few questions:

1) at the expense of the header.

2) why the rule for the class each_2nd does not work?

3) Why does the order of specifying css rules affect their execution? For example, if you specify rules for header before instructions for div.container, then rules for header will work, but they will stop working for h1. Otherwise (if returned as it was) will work for h1 and will not work for header: /

And, yes, I encounter such problems for the first time. Previously, it seemed like the order of writing the rules did not affect anything, but now such crap.

body { background-color: #000; } /*Если header стоит тут, то всё ок*/ header { display: block; color: lightblue; margin-top: 0px; margin-bottom: 60px; } div.container { background-color: #e5e8c0; height: 550px; } div.table { width: 800px; margin: 0px auto; } a { text-decoration: none; color: white; cursor: pointer; } a:hover { color: green; } a:active { color:darkgreen; } a:visited { color: red; } /*Если header тут, то не работает.*/ } h1 { text-align: center; } table { border-collapse: collapse; } tr.header { background-color: khaki; color: white; font-size: 30px; background-color: #000; } td, th { border: 1px solid #000; } th { padding: 10px 15px; } td { background-color: #aaa; font-weight: bold; font-style: italic; text-align: center; color: white; padding: 5px 10px; font-size: 22px; } th.name { /*height: 20px;*/ } tr.each_2nd { background-color: darkgreen; } 
 <div class="container"> <header> <h1>Раздел продажи инструментов</h1> </header> <div class="content"> <div class="table"> <table> <tr class="header"> <th class="name" width="300">Название</th> <th width="300">Производитель</th> <th width="250">Цена</th> </tr> <tr> <td>Пианино</td> <td>Piano Masters</td> <td>$100 000</td> </tr> <tr class="each_2nd"> <td>Рояль</td> <td>Piano Fanatics</td> <td>$150 000</td> </tr> <tr> <td>Клавинет</td> <td>Clavinet Idiots 24/7 Idiots</td> <td>$1</td> </tr> </table> </div> </div> </div>

  • 2
    "The order of writing the rules did not influence" - always influenced, it is written about this in any html / css textbook - andreymal
  • one
    “Why the rule for the class each_2nd does not work?” - it even works, <tr class="each_2nd"> has a dark green color. Only inside this tr are td elements with background-color: #aaa; - and they just cover the dark green color under them with their gray background - andreymal
  • @andreymal author of the book that I am reading now apparently forgot to write about it) Can you say in what order they should be written? - JustLearn
  • htmlbook.ru/samcss/kaskadirovanie - andreymal 7:43 pm
  • But in your case, the order does not matter, and the problem from clause 3 cannot be repeated: I rearranged the styles for the header both there and here, but the page looks the same in all cases and all the styles work. Show an example that does not work for you - andreymal

0