Какая разница в описании стиля списка?

Question

[BDmitry]

Добрый день,
вот есть два вариантаописания стила
1.

.nav {
  margin: 20px 0;
  
}
.nav ul {
  margin: 0;
  padding: 0;
  
  text-align: center;
  text-decoration-color: #030408;


}
.nav li {
  margin: 0 5px 10px 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-decoration-color: #030408;
  *display:inline; /* ie7 */

}
.nav a {
  padding: 3px 12px;
  text-decoration: none;
  color: #030408;
  line-height: 100%;

И второй:

#navbar {
        margin: 0;
        padding: 0;
        padding-top: 20px;
        height: 70px;
        list-style-type: none;
        /*border: 2px solid #0066FF;*/
        /* border-radius: 20px 5px; */
        width: 100%;
        text-align: center;
        background-color: #525a66;
      }
      #navbar li { display: inline; }
      #navbar a {
        color: #fff;
        padding: 5px 10px;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        width: 100px;
}

В чем разница? В том плане, в чем разница между точкой и решеткой?

Comments

[Ankhena]

Почитайте: htmlbook.ru/samcss/kaskadirovanie

Answer 1

[Дима Паутов]

Класс можно использовать много раз, id нет!!! Перебить такой стиль сложней. Например установив обёртку:
https://jsfiddle.net/rsac2w67/

Учите приоритеты селекторов и их вес

Comments

[BDmitry]

Что означет вот это? .navWrap .nav
Это типа класс в кассе?

[Дима Паутов]

BDmitry, да. Так я могу перебить стили класса .nav, а если внутри .navWrap будет лежать id nav, то перебить его стиль не получится. В примере же это показано

[BDmitry]

что значит перебить?

[BDmitry]

Это типа когда мне впринципе этот класс нужен, но вот в конкретном месте я хочу стиль поменять?

[Gortyser]

BDmitry, это типа когда у тебя стили для .nav одни, а для .nav внутри блока .navWrap нужны другие.

[BDmitry]

млин, два часа прусь в монитор, не могу найти информацию о том
в чем разница между '#' и '.'
и кто они вообще такие.
Понял что в CSS можно указывать либо напрямую теги a, body и т.п.
либо некие обертки div.
А что такое '#' и '.' не могупонять.

[BDmitry]

Вот что очень помогло разобраться https://petrenco.com/html_css.php?txt=50

А если конкретно по тем двум листингам в моем вопросе, то видимо там разница в том, что одному человеку захотелось использовать классы(точки)
второму ID (решетки)

Answer 2

[Gortyser]

Почитайте про каскадность и специфичность селекторов. Если коротко, то каждый селектор тега (типа nav, li и т.д.) оценивается в 1, селектор класса - в 10, селектор идентификатора - в 100. Таким образом, перебить селектор идентификатора будет довольно сложно.
Если уж честно, то использовать идентификаторы в селекторах - плохая идея, принято оставлять их для скриптов, а стили вешать на классы.