Есть ли CSS-селектор для текстовых узлов?

173

Что я хотел бы сделать (не в IE, очевидно):

p:not(.list):last-child + :text {
  margin-bottom: 10px;
}

Который дал бы текстовый узел поля. (Это вообще возможно?) Как бы получить текстовый узел с помощью CSS?

css css-selectors Rudie
источник
2
Вы можете приблизиться к использованию ::first-line, хотя, как следует из названия, это относится только к первой строке текста. (Кроме того, я думаю, что только некоторые свойства могут быть установлены на нем)
Марк Гарсия

Ответы:

114

К текстовым узлам не могут быть применены поля или любой другой стиль, поэтому все, к чему должен применяться стиль, должно быть в элементе. Если вы хотите , чтобы некоторые из текста внутри вашего элемента стилизовать иначе, завернуть его в spanили div, например.

Иаков
источник
58
Тем не менее, я отчаянно скучаю по :: before и :: after в текстовых узлах.
Шабун
6
I'm nevertheless desperately missing ::before and ::after on text nodes.На самом деле. Они могут не принимать форматирование, но они, безусловно, принимают content.
Synetech
12
Это вполне разумный вопрос, чтобы спросить, как нацелиться на текстовый узел. Я понимаю, что в ОП специально указано «поле», но это другие стили, которые могут быть применены к текстовому узлу и которые вы можете применить к текстовому узлу, а не к родительскому узлу. Например, скажем, я хотел, чтобы граница снизу под текстом. Применение этой нижней границы к текстовому узлу даст желаемый результат, но применение его, скажем, родительского div, создаст нижнюю границу вокруг всего div. К сожалению, конечно, CSS не позволяет вам нацеливать текстовый узел с помощью добавления элементов HTML ... по крайней мере, на данный момент.
ВКК
1
Вы можете установить шрифт для него, конечно, работает, но любой другой стиль не применяется
Хамид Бахманабады
Вы можете делать такие вещи только сейчас для stackoverflow.com/questions/10645552/…
fearis
50

Вы не можете ориентировать текстовые узлы с помощью CSS. Я с тобой; Я бы хотел, чтобы ты мог ... но ты не можешь :(

Если вы не <span> заключаете текстовый узел в то, что предлагает @Jacob , вы можете вместо этого дать окружающий элемент paddingвместо margin:

HTML

<p id="theParagraph">The text node!</p>

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
Ричард Дж.П. Ле Гуэн
источник