Определение пользовательских стилей CSS для HTML-тегов

Question

Определение пользовательских стилей CSS для HTML-тегов

0

Я не делаю CSS, и я даже не уверен, что это называется, так извините невежество :-)

.examples {
 }

.examples b {
  font-weight: bold;
}

.examples p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

Я предполагаю, что это означает, что любые b или p теги внутри <div class='examples'> будут использовать стиль с .examples и все, что задано для b или p?

Могу ли я создать свой собственный стиль с помощью этого соглашения, например?

.examples mystyle {
}

<div class='examples'>
   <div class='mystyle'>
   ...

ОБНОВИТЬ:

Я хочу mystyle использовать examples укладку, но переопределить с черной нижней границей. Использование .examples.mystyle нижняя граница появляется за пределами examples div, но с .examples mystyle закрывающий div выглядит хорошо, но нижняя черная граница ушла. Приношу свои извинения, поэтому он не работает в любом случае.

http://jsfiddle.net/SAFX/5ft9W/

raffian 14 дек. 2013, в 18:30

Источник

0

Ваш div не находится внутри какого-либо элемента, не говоря уже об элементе с классом examples . Пожалуйста, найдите время, чтобы прочитать о селекторах CSS: Селекторы, Уровень 3 .
David Thomas 14 дек. 2013, в 16:35
0

.examples .mystyle {} Это действительно
user2227606 14 дек. 2013, в 16:35
0

@DavidThomas извините, я использую mystyle внутри examples , поэтому они называются селекторами?
raffian 14 дек. 2013, в 16:37
1

@raffian Является ли CSS-селектор на самом деле .examples .mystyle (с точкой)? Если это так, вы можете исправить опечатку, потому что это отвлекает людей от ответа на неправильный вопрос.
JJJ 14 дек. 2013, в 16:40
0

@raffian: может быть, вы могли бы немного более четко описать свой вопрос? Я думаю, что вы немного заблуждаетесь о том, как работает CSS (и это хорошо), но трудно помочь без объяснения того, что, по вашему мнению, должен делать ваш код более подробно.
Paul D. Waite 14 дек. 2013, в 16:45
0

@Juhana Нет, не опечатка, у меня получилось. .examples mystyle , но какая разница?
raffian 14 дек. 2013, в 16:45
0

Это на самом деле ничего не сделает, если у вас нет элемента <mystyle> . Было бы здорово увидеть полный пример.
JJJ 14 дек. 2013, в 16:46
1

@ PaulD. Хорошо, я создам скрипку ..
raffian 14 дек. 2013, в 16:46
0

@Juhana Это сделает HTML недействительным. Неправильно ли использовать CSS для выбора тега для несуществующего тега?
Kevin Bowersox 14 дек. 2013, в 16:49
0

@KevinBowersox Это недопустимый HTML, но большинство, если не все современные браузеры, допускают его, поэтому для целей этого вопроса он будет работать.
JJJ 14 дек. 2013, в 16:52
0

@ PaulD.Waite добавил jsfiddle
raffian 14 дек. 2013, в 17:05
1

Что касается обновления, как только вы исправите селектор, чтобы использовать . Вы сказали, что используете , это работает .
David Thomas 14 дек. 2013, в 17:07
0

Как я уже сказал, .examples mystyle ничего не делает (см. Jsfiddle.net/5ft9W/3 ). С точкой все правила применяются правильно, но, очевидно, они не являются правильными правилами для того, чего вы хотите достичь (возможно, без поплавка ?)
JJJ 14 дек. 2013, в 17:08
0

@ Юхана Бинго! извините за катание на американских горках, это работало отлично!
raffian 14 дек. 2013, в 17:10

Показать ещё 12 комментариев

Теги:

javascript

html

css

2 ответа

Ещё вопросы

Ваш div не находится внутри какого-либо элемента, не говоря уже об элементе с классом examples . Пожалуйста, найдите время, чтобы прочитать о селекторах CSS: Селекторы, Уровень 3 .
@DavidThomas извините, я использую mystyle внутри examples , поэтому они называются селекторами?
@raffian Является ли CSS-селектор на самом деле .examples .mystyle (с точкой)? Если это так, вы можете исправить опечатку, потому что это отвлекает людей от ответа на неправильный вопрос.
@raffian: может быть, вы могли бы немного более четко описать свой вопрос? Я думаю, что вы немного заблуждаетесь о том, как работает CSS (и это хорошо), но трудно помочь без объяснения того, что, по вашему мнению, должен делать ваш код более подробно.
@Juhana Нет, не опечатка, у меня получилось. .examples mystyle , но какая разница?
Это на самом деле ничего не сделает, если у вас нет элемента <mystyle> . Было бы здорово увидеть полный пример.
@Juhana Это сделает HTML недействительным. Неправильно ли использовать CSS для выбора тега для несуществующего тега?
@KevinBowersox Это недопустимый HTML, но большинство, если не все современные браузеры, допускают его, поэтому для целей этого вопроса он будет работать.
Что касается обновления, как только вы исправите селектор, чтобы использовать . Вы сказали, что используете , это работает .
Как я уже сказал, .examples mystyle ничего не делает (см. Jsfiddle.net/5ft9W/3 ). С точкой все правила применяются правильно, но, очевидно, они не являются правильными правилами для того, чего вы хотите достичь (возможно, без поплавка ?)
@ Юхана Бинго! извините за катание на американских горках, это работало отлично!

Kevin Bowersox · Answer 1 · 2013-12-14T15-27-00.000Z

3

Поскольку вы используете класс в теге, он должен быть селектором класса, и элемент должен быть дочерним .examples:

/* Notice the '.' on mystyle */
.examples .mystyle {
}

<div class="examples">
    <div class='mystyle'></div>
</div>

В CSS-стиле есть несколько частей:

.examples .mystyle { /* selector */
   font-weight: bold;  /* This entire line is a declaration consisting of a property & value*/
}

Kevin Bowersox 14 дек. 2013, в 15:27

1

Да, это то, что я делаю, mystyle внутри examples DIV, следовало бы упомянуть , что.
raffian 14 дек. 2013, в 16:36
0

@KevinBowersox .examples mystyle { работает, но .mystyle не работает, форматирование из examples не распространяется на дочерний div.
raffian 14 дек. 2013, в 16:41
0

@raffian Заменяет ли стиль .examples .mystyle какие-либо свойства, установленные в .examples ?
Kevin Bowersox 14 дек. 2013, в 16:42
1

@raffian: Я подозреваю, что ваши стили .examples mystyle самом деле не работают так, как вы думаете. Может быть, вы могли бы быть немного более точным в отношении того, что вы ожидаете от своего кода.
Paul D. Waite 14 дек. 2013, в 16:46
0

@ PaulD.Waite Я не понимаю, как он применяет стили с помощью .examples mystyle
Kevin Bowersox 14 дек. 2013, в 16:49
0

@KevinBowersox обновлен с помощью jsfiddle
raffian 14 дек. 2013, в 17:04
0

@raffian Стиль перемещает div влево, но вы указываете ширину 100%. Вам нужен поплавок? jsfiddle.net/5ft9W/1
Kevin Bowersox 14 дек. 2013, в 17:06
0

@KevinBowersox: да, я думаю, он еще не знает, как работают CSS-селекторы и каковы они.
Paul D. Waite 14 дек. 2013, в 17:13
0

@KevinBowersox Это была проблема, поплавок; Я бэкэнд-парень, вам, ребята, легко с этим материалом CSS :-)
raffian 14 дек. 2013, в 17:15
0

@raffian Я мастер на все руки, серверная часть (db, server) (html, css, js). Внешний интерфейс не так уж и велик, он просто сходит с ума от кросс-браузерной совместимости и особенностей каждого браузера.
Kevin Bowersox 14 дек. 2013, в 17:18

Показать ещё 8 комментариев

David Thomas · Answer 2 · 2013-12-14T15-33-00.000Z

То, о чем вы, кажется, спрашиваете, является терминологией для описания дочерних элементов наследования стиля от предка; это "каскад" каскадных таблиц стилей. Не все элементы наследуют от своих родителей/предков (a ссылки, в частности, не наследуют color свойство по умолчанию, хотя указав color: inherit; в их CSS декларации может заставить их сделать это).

Если вы спрашиваете о том, как обратиться к списку селекторов, которые определяют, какие элементы нацелены определенным правилом, то есть "селектор" или "селекторное выражение".

Рекомендации: