Может кто-нибудь объяснить разницу для этих двух селекторов CSS?
.work-container . h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
Какая дополнительная точка в верхнем определении?
.work-container h3 {
font-size: 14px;
margin-top: 0px;
font-weight: 600;
height: 27px;
}
Префикс A . обычно представляет собой селектор классов, но если он сразу же следует за пробелом, то это синтаксическая ошибка.
Если мне угрожать догадка, то, вероятно, автор хотел сказать .work-container > h3, но пропустил клавишу Shift так же, как он собирался ввести символ > (дочерний комбинатор).
Второй селектор .work-container h3 просто означает любой h3, содержащийся внутри элемента с классом work-container.
Дела
Начало селектора с точкой
.class_name означает имя класса
Два привязанных селектора, разделенных пробелом
.outside .inside
означает элемент с классом .inside, сгенерированный из элемента с классом .outside
Два смещенных селектора без разделения
.name1.name2
означает элемент, который имеет как класс name1, так и name2
например: class="name1 name2"
. в CSS означает, что это класс, и его можно применять ко многим элементам.
# в CSS означает, что это идентификатор, и его можно применить к одному элементу на странице.
Без этого, это тэг, нацеленный на все использование.
В вашем синтаксисе .work-container . h3 на самом деле является ошибкой. . должен был либо ,, либо как BoltClock сказал, >, в котором говорится о прямом потоковом операторе в CSS.
. говорит о своем классе
# означает его id
и если нет ничего, кроме селектора, то это тег
. в CSS означает, что это класс, и его можно применять ко многим элементам с использованием пространства между классами
Например:
<h3 class="class1 class2 class2">Heading</h3>
# в CSS означает, что это идентификатор, и его можно применить к одному элементу на странице.
Например
<h3 id="idname1">Heading</h3>