Как я могу выделить первое слово предложения, используя селекторы CSS, и является ли это хорошим или плохим способом сделать это с точки зрения сопоставимости браузеров?
код:
<h2>this is a sentence</h2>
спасибо
css полужирное первое слово
comment
Не уверен, что вы имеете в виду о совместимости браузера.
- person BoltClock schedule 16.09.2011
Ответы (5)
В CSS нет псевдоэлемента ::first-word; вам нужно будет обернуть первое слово дополнительным элементом, а затем выбрать его.
person
BoltClock
schedule
16.09.2011
Я бы выбрал ‹span class=firstWord›(Первое слово)‹/span›.
- person Ben Hull; 16.09.2011
Правда, там только :first-letter. Но вы можете сделать это с помощью javascript, например. jQuery
$('h2').each(function(){ var $p = $(this); $p.html($p.html().replace(/^(\w+)/, '<strong>$1</strong>')); });
- person atma; 16.09.2011
Использовать класс Span
Итак, создайте класс с именем жирный и оберните первое слово в классе.
.bold {
font-weight:bold;
}
Затем
<h2><span class="bold">the</span> brown fox</h2>
person
422
schedule
16.09.2011
имена классов, такие как «полужирный», встраивают информацию о презентации в HTML, что, как правило, не очень хорошо. Что, если однажды мы решим, что первое слово должно быть выделено курсивом, а не жирным шрифтом?
- person Ben Hull; 16.09.2011
FFA это просто для объяснения, можно было бы назвать Эриком
- person 422; 16.09.2011
кроме того, в HTML нет испанского элемента.
- person rgin; 16.09.2011
@Beejamin Однако техника все еще верна. Добавьте диапазон внутри ‹h2› с классом, чтобы сделать одно слово другим стилем
- person marissajmc; 16.09.2011
Выглядит правильно, но опять же я провалил уроки испанского в средней школе. (извините, я не мог с этим поделать) span - это то, как я бы это сделал, если бы мне нужно было
- person thegaffney; 16.09.2011
Я не согласен с тем, что это хороший пример техники — имена классов, которые вы выбираете, важны. «Эрик» ничего не значит и не говорит никому, кто смотрит на разметку, почему там есть интервал. «Жирный» говорит вам, что разработчик пытался сделать, но не почему. 'firstWord' лучше, так как он объясняет, что делает элемент в разметке.
- person Ben Hull; 16.09.2011
Я поставил слово между <b>First</b>
person
Hossam Ghareeb
schedule
06.06.2013
Тег ‹b› как бы избегают. Вы должны использовать css или ‹strong›‹/strong›
- person MayorMonty; 31.07.2014
Дело не в том, что его избегают, а в том, что сильный тег используется там, где есть семантический акцент, в то время как тег b является чисто типографским.
- person Forest; 11.10.2015
Забавно, что это решение, за которое проголосовали против, может иногда иметь больше смысла, чем использование ‹strong›, потому что я думаю, что всегда выделять жирным шрифтом первое слово в некоторых предложениях будет типографским решением/дизайнерским решением, не означающим, что на самом деле эти слова имеют истинный смысловой акцент.
- person vicenteherrera; 02.09.2016
MayorMonty, Forest, Vicenteherrera и другие заинтересованные лица: есть простой способ объяснить разницу между ‹b›‹/b› и ‹strong›‹/strong›. Просто задайте вопрос: «Почему тег ‹b›?» и вы получаете ответ, что содержимое этого тега нужно сильно подчеркнуть, по сравнению с остальным текстом. Это вопрос, который вам не нужно задавать для тега ‹strong›. Так что, когда этот вопрос кажется излишним, вы на правильном пути;)
- person JPA; 15.07.2017
просто поместите первое слово в сильный тег.
<h1><strong>This</strong> is how you do it simply.</h1>
Вот JS Fiddle
person
Shane Hussain Naqvi
schedule
29.07.2016
Текущие селекторы CSS теперь позволяют это.
Поэтому я меняю свой подход, выделяя первую строку жирным шрифтом.
HTML
<h2>this<br> is a sentence</h2>
CSS
h2::first-line{
font-weight: bold;
}
person
Daniel De León
schedule
02.06.2017
