Возможный дубликат:
Разница между .classA.classB и .classA.classB в CSS?
Не могли бы вы объяснить мне разницу между этими двумя синтаксисами классов CSS:
.element .symbol {}
и
.element.large .symbol {}
Я не понимаю разницы между ними. Первая строка указывает два разных класса, к которым применяются одни и те же стили. Но о втором, что означает "большой", который написан на ".элементе"?
Я думаю, у вас есть небольшое недоразумение, что означает первый.
.element .symbol {}
Указывает, что эти настройки CSS применяются к любому элементу HTML с классом .symbol, который находится внутри элемента с классом .element.
<div class="element">
<div class="symbol" />
</div>
В этом примере ваша первая запись CSS повлияет на тег <div> посередине.
Второй пример означает, что для первого класса требуются два класса. Кроме того, он равен первому.
<div class="element large">
<div class="symbol" />
</div>
Итак, если HTML выглядит так, значения CSS будут применены к внутреннему тегу <div>.
Если вы хотите установить теги CSS, которые применяются к нескольким классам отдельно, вам нужно разделить их с помощью запятой. Итак, это выглядит так:
.element, .symbol {}
Изменить: по запросу ссылку на документацию для селекторов CSS.
.element .symbol
означает .symbol внутри .element
.element.symbol
означает .element, который также имеет класс symbol.
Итак,
.element.large .symbol
означает .symbol внутри .element, который также имеет класс large.
Использование
.element.large
относится к элементу с обеими классами:
<div class="element large"></div>
а не потомок элемента:
.element .large
что означает:
<div class="element">
<div class="large"></div>
</div>
только
<div class="large"></div>
"получает" стили.
В основном, разделяемое пробелом, подразумевает два элемента с отношением descendant.
Вы использовали бы .element .symbol здесь, где у вас есть элемент внутри другого элемента. Например:
<div class="element">
<i class="symbol"></i>
</div>
Если по дороге вы хотели дифференцировать некоторые div, вы можете добавить дополнительный класс для таргетинга только тех, которые отличаются, и настроить его с помощью .element.large .symbol. Итак, например:
<div class="element large">
<i class="symbol"></i>
</div>
В вашем втором примере первая часть селектора - это просто элемент с двумя классами, как в <span class="element large"> или <span class="large element">.
В общем, каждая часть селектора применяется к одному элементу HTML.
table[border].clname означает таблицу с атрибутом border и классом clname, а table [border] .clname означает элемент с классом clname в элементе с атрибутом border в таблице.
(Edit: хорошо, я говорю "один элемент HTML", но, конечно, вы можете иметь более одной таблицы, к которой это относится. Вы понимаете.)