Запутался в наследовании CSS

Question

Я читал о CSS, и я действительно запутался в том, как работает наследование (я думаю, что это правильный термин для следующего). В CSS я могу объявить класс:

#mytext {
}

тогда я вижу, что некоторые люди делают:

p.mytext {
}

Но зачем это делать? Почему они не могут просто сделать:

<p class="mytext">

Без объявления p.mytext? Имеет ли смысл то, что я спрашиваю?

и иногда я вижу:

p#mytext ... Почему это отличается? Я буду продолжать искать учебники, но спасибо за любые советы.

Answer 1

Знак фунта (#) относится к идентификатору, который должен быть уникальным для страницы. Точка (.) относится к классу, который можно использовать много раз. Люди будут использовать p#mytext, если им нужен уникальный стиль для одного (только одного) тега абзаца.

Вы можете прочитать об этом здесь .

Хотелось добавить, что некоторые веб-разработчики, кажется, тяготеют к объявлению всего как классов. Если вы используете генератор макетов любого типа чаще, чем каждый элемент будет классом.

Answer 2

#mytext ссылки <p id="mytext"/> (не обязательно должен быть элементом p, #mytext просто ссылается на этот идентификатор)

Принимая во внимание, что .mytext ссылается <p class="mytext"/> (не обязательно должен быть p элементом, .mytext просто ссылается на что-либо с таким именем класса)

Добавляя другие вещи, такие как p.mytext, вы создаете более сильную привязку к своему правилу, например: p.mytext { color:white; } .mytext { color:black; }

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

Answer 3

CSS 101 - основы

CSS - all elements
    * { ... }
HTML - basic element
    <p></p>
CSS
    p { ... }
HTML - element with id
    <p id="someid"></p>
CSS - element with id
    p#someid { ... }
CSS - all id's
    #someid { ... }
HTML - element with class
    <p class="someclass"></p>
CSS - element with class
    p.someclass { ... }
CSS - all elements with class
    .someclass { ... }
CSS -  is equal to
    *.someclass { ... }
HTML - element with both id and class
    <p id="someid" class="someclass"></p>
CSS
    p#someid.someclass { ... }
HTML - nested element
    <p><span></span></p>
CSS
    p span { ... }
HTML - nested element with id
    <p><span id="someid"></span></p>
CSS
    p span#someid { ... }
HTML - nested element with class
    <p><span class="someclass"></span></p>
CSS
    p span.someclass { ... }
HTML - nested element with id in element with class
    <p class="someclass"><span id="someid"></span></p>
CSS
    p.someclass span#someid { ... }

теперь вы можете смешивать и сопоставлять все эти вещи, чтобы сделать действительно сложные селекторы

, если вам нужно несколько селекторов с одинаковыми свойствами, которые вы можете разделитьих с запятой

    p.someclass, span#someid { ... }

Answer 4

Первая проверка этот вопрос здесь .

Вкратце # представляет идентификатор в css, а . представляет класс.если вы говорите p#myText в вашем css, это означает, что у вас есть <p id="myText"></p> в вашем html, а p.myText для <p class="myText"></p>.

Кроме того, вы объявляете ID, если у вас есть уникальный элементHTML, и если у вас есть несколько элементов с одинаковыми стилями, вы объявляете класс для них.

Answer 5

+ 1 за интересующий вопрос.

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

Что касается второй части вашего вопроса, некоторые люди предпочитают добавлять имя элементаих классы и идентификаторы.Более конкретно, не имея определения.

img.large { width 200px /* Only applies to img with large class */ }
textarea.large { width: 300px /* Only applies to textareas with large class */ }
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ }
.large { font-size: 2em; /* Applies to any element with class of large */ }

Лично мне нравится добавлять имя элемента в мои стили, чтобы я не забывал, на какие элементы он влияет.

Answer 6

Хеш (#) - это определение уникального идентификатора.

#foo { color: blue; }

<div id="foo">

Точка (.) - это определение класса.

.bar { color: red; }

<div class="bar">

Но вы также можетессылаются на теги с определенными классами и идентификаторами:

div.baz { color: green; }
span#qux { color: yellow; }

<div class="baz">
<span id="qux">

Answer 7

Допустим, у вас есть следующий HTML:

<div id="main">
    <p class="para">content</p>
    <p class="para">content</p>
</div>

тогда:

div#main { }

ссылки на div с идентификатором "main"

#main { }

ссылается на все элементы с идентификатором "main"

p.para { }

ссылается на все p элементы с классом "para"

.para { } 

ссылается на ВСЕ элементы с классом "para"

NB. Идентификатор должен быть уникальным на странице, тогда как класс может использоваться несколько раз