Подтвердить что ты не робот

Div.classname в файле css

Я видел, как некоторые разработчики пишут

HTML:

<div class="test"> some content </div>

CSS

div.test {
  width:100px.
}

В чем состоит цель div.className вместо .className.

Означает ли это, что этот стиль будет применяться только тогда, когда класс применяется к div.

Итак, <span class='test'>content</span> не будет иметь эффекта "test" с css выше? Если это так, это лучшая практика? Это почти похоже на переопределение стиля для разных типов элементов, смешивание стилей с правилами!

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы действительно ответить на ваш вопрос, я должен сначала ответить на несколько других вопросов. Потому что, как вы увидите, все о контексте.

  • В чем смысл HTML?
  • Что такое div?
  • Как он отличается от других элементов HTML?
  • И что это значит, когда у элемента есть класс (или набор классов)?

Я дам вам свое мнение об ответах на этот вопрос, и тогда мы сможем провести осмысленное обсуждение лучших практик.

В чем смысл HTML?

Точка HTML - это добавить контекст к вашим данным. Текст, сам по себе, может быть очень сильным. С момента изобретения печатного станка он очень хорошо служил человечеству как чрезвычайно мощный инструмент коммуникации. Возьмите следующий документ, например:

My shopping list
Bread
Milk
Eggs
Bacon

Даже с помощью этого простого текстового документа большинство людей может очистить намерение писателя; его список покупок. Существует заголовок и набор элементов списка, которые необходимо приобрести.

Итак, какова точка HTML, если достаточно простых текстовых документов?

Справедливый вопрос. Если текста достаточно для общения, то зачем нам HTML?

Читатель документа пытается проанализировать информацию, которую они получают. Этот процесс встроен в массу культурных трюков и изученных моделей, которые используются для восстановления первоначального намерения. Для большинства людей с базовым пониманием английского языка тривиально определить смысл документа. Однако по мере увеличения сложности документа (или сближения читателя с контекстом уменьшается), становится все труднее правильно разобрать. Сделаны предположения; контекст становится неясным. В конце концов, способность читателя точно декодировать сообщение разваливается, и сообщение является неотличимым.

Это пространство, в котором существует HTML. Он предназначен для обертывания данных, предоставления контекста и смысла. Поэтому, даже если вы (или компьютер) не можете обработать фактическую информацию, вы можете понять контекст, в котором она должна быть. Например, тот же документ с HTML:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

Теперь, даже если мы не смогли понять фактические данные, у нас есть контекстный фон для интерпретации данных. У нас есть заголовок и неупорядоченный список со списком элементов списка.

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

Я понятия не имею, что это значит, но, по крайней мере, я знаю, что есть заголовок и неупорядоченный список. Именно так браузер видит ваш HTML-документ: некоторые данные, завернутые в контекст.

Что такое div? Чем он отличается от других элементов HTML?

HTML-элементы определяют контекст; они описывают содержимое, которое они обертывают. HTML не должен изменять или изменять значение данных, он просто увеличивает его и определяет отношения между данными: parent, child, sibling, ancestor... Таким образом, элемент li описывает элемент списка. Элемент h1 описывает заголовок. Элемент table описывает таблицу и т.д.

Итак, что такое div? Ну, div - это элемент HTML на уровне блока, который не имеет никакого контекста. Само по себе это ничего не значит (кроме факта, что это блок).

В то время как большинство других элементов HTML (за исключением элемента span) имеют какой-то явный контекст, элемент div этого не делает. Это огромная разница. Это пустая коробка. Это коробка, которая ничего не значит. Когда вы помещаете что-то в "div", вы говорите, что это в коробке, но это поле на самом деле мало что значит.

Итак, какова точка div then?

Тег div предоставляет пустой список для определения вашего собственного контекста. Вернемся к нашему примеру списка покупок: прямо сейчас между неупорядоченным списком и заголовком существует слабая связь. Они слабо связаны с братьями и сестрами, они просто находятся рядом друг с другом, но ничто действительно не связывает их вместе как единое целое. Мы хотели бы сказать следующее:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

Но мы не можем этого сделать в рамках спецификации HTML. Но что мы можем сделать, это вставить их в "ящик":

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

Что означает, когда элемент имеет класс (или набор классов)?

Но, опять же, это окно не означает, что сейчас. То, что мы действительно хотели бы сделать, это дать этому поле определенный контекст. Мы хотим придумать свой собственный элемент. То, где вступает в игру атрибут class. В то время как элементы HTML дополняют данные, атрибуты HTML дополняют элементы. Мы можем сказать:

<div class="shopping_list">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

Итак, мы говорим, что наш div действительно является shopping_list. Этот shopping_list имеет заголовок и неупорядоченный список элементов. Предполагается, что HTML сделает ваши данные более ясными, не менее ясными.

Итак, наконец, как все это относится к вашему вопросу?

Когда вы пишете CSS, вы используете свой контекст (элементы, классы, идентификаторы и отношения между элементами) для определения стиля.

Итак, вернемся к примеру списка покупок. Я мог бы написать стиль, в котором говорилось:

<style>
    ul {
        background-color: red;
    }
</style>

Но что я на самом деле говорю? Я говорю: "Все неупорядоченные списки должны иметь цвет фона красного цвета". И вопрос в следующем: действительно ли это я? При написании CSS вы должны учитывать свою структуру. Правильно ли говорить, что все элементы div должны выглядеть определенным образом или давать только div конкретный класс? Например, я бы сказал, что это может быть лучше:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

Здесь я говорю, что эти элементы в этом конкретном контексте должны выглядеть именно так.

Итак, в вашем примере, что означает div с классом test? Что такое контент? В каком контексте вы пытаетесь разъяснить? Это скажет вам, как выглядят ваши селекторы.

Например:

<div class="shopping_list important">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

<table class="budget">
    <tbody>
        <tr class="important">
            <td>Account Balance</td><td>$0.00</td>
        </tr>
            </tbody>
</table>

Является ли селектор CSS .important хорошей идеей? Является ли "важным списком покупок" тем же, что и "важная строка таблицы в таблице бюджета"?

И только вы можете ответить на это, в зависимости от ваших данных и того, как вы решили пометить эти данные.

Существует множество технических тем, которые затрагивают специфику CSS, например, хорошие практики для поддержки сложных таблиц стилей и сложных ассоциаций между элементами, но в конечном итоге все сводится к ответу на эти вопросы:

  • Что я пытаюсь общаться? (Данные/Content)
  • В каком контексте находятся данные? (HTML)
  • Как это должно выглядеть? (CSS)

Как только вы сможете ответить на эти вопросы, все остальное начнет вставать на свои места.

Ответ 2

Вы правы. div.className имеет более высокую специфичность, чем .className. Это означает пару вещей:

  • Только divs с className получат стили, другие элементы не будут
  • css для div.className будет переопределять другие правила css с меньшей специфичностью, например просто .otherClassName

Ответ 3

Это точно, как вы сказали style will be applied only when the class is applied to a div. Он не будет доступен для любого другого элемента.

Лучше всего это делать, если у вас есть класс, который применяется только к div.

Хотя если другой класс существует как .test, он будет переполнен любым стилем, выполненным внутри div.test, когда применяется к div с классом test.

Ответ 4

вы можете применять классы к нескольким элементам dom, поэтому div.classname позволит вам выбирать только элементы div с этим классом, а не все элементы dom с этим классом

Ответ 5

Совершенно верно.

Это из спецификации W3C:

Например, мы можем назначить информацию о стиле всем элементам с помощью class ~ = "pastoral" следующим образом:

*.pastoral { color: green }  /* all elements with class~=pastoral */
or just .pastoral { color: green }  /* all elements with class~=pastoral */

Следующее присваивает стиль только элементам H1 с классом ~ = "pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Учитывая эти правила, первый экземпляр H1 ниже не будет иметь зеленый цвет текст, а второй:

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

Ответ 6

Префикс класса с именем элемента ограничивает набор стилей указанным типом элемента.

.test { font-weight:bold; }
span.test { color:#fff; }
div.test { color:#000; }

В этом случае все элементы, использующие класс, будут выделены жирным шрифтом, шрифт для SPANS будет белым, а шрифт для DIVS будет черным.

Ответ 7

Селектор div.test будет применять правило стиля применяется только к элементам div с классом test.

Ответ 8

Означает ли это, что этот стиль будет применяться только тогда, когда класс применяется к div?

Да


Предыдущее правило не будет влиять на действие span


Причина такого выбора зависит от контекста. В общем, любой стиль css должен фокусироваться на определенном элементе на данной странице, иначе вы будете иметь

div { .... }

Ответ 9

Это вопрос стиля.;)

Он будет применяться только к элементам div. Некоторым людям как можно сузить сферу охвата, чтобы помочь сократить обслуживание в будущем, в то время как другие люди считают, что иметь его более открытым, легче поддерживать. В основном это вопрос личного предпочтения.

Ответ 10

Что именно это означает. Это не хорошая или плохая практика, она полностью зависит от того, какие элементы вы хотите применить к определенным классам. Иногда вы хотите, чтобы класс применялся ко всем элементам, в другие моменты, когда вы хотите, чтобы класс имел разные эффекты на основе элемента, такие как наличие как span.test, так и div.test, определенных в CSS.

Ответ 11

стиль будет применяться только тогда, когда класс применяется к div?

также есть некоторые последствия для производительности.. вот счетчик производительности

  • Идентификаторы являются самыми быстрыми
  • Названия тегов следующие быстро:
  • Имена классов без имени тега являются самыми медленными

В зависимости от того, какой из них использовать, используйте то, что наиболее подходит. Если у вас есть окно поиска на вашей странице, то использование идентификатора для этого будет наиболее подходящим, потому что есть только одно окно поиска. С другой стороны, строки строк будут идентифицироваться классом, потому что есть (или может быть) более одного.

то, что большинство ppl dnt обращают внимание на семантику при названии класса.. прочитайте этот блог для некоторых полезных советов: http://css-tricks.com/13423-semantic-class-names/

Жаль, что я хотел добавить Одна важная вещь, которую следует помнить о том, как браузеры читают ваши селектора CSS, заключается в том, что они читают их справа налево. Это означает, что в селекторе ul > li a.home первое, что интерпретируется, является a.home, поэтому избегайте делать такие ошибки

Ответ 12

Помимо техобслуживания и личных предпочтений, в селекторе CSS есть точки спецификации. Всегда хорошо знать.

div = 1 point
.className = 10 points
div.className = 1+10 points

Селектор с наибольшим количеством очков выигрывает. С этим в Разуме вы можете перейти от очень общего к конкретным стилям.