Чи є селектор CSS для текстових вузлів?

173

Що я хотів би зробити (очевидно, не в IE):

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

Який би дав поле текстовому вузлу. (Це можливо навіть?) Як я можу отримати текстовий вузол за допомогою CSS?

css css-selectors

— Руді
джерело

Ви можете наблизитись до використання ::first-line, хоча, як випливає з назви, воно стосується лише першого рядка тексту. (Також я думаю, що на ньому можна було встановити лише деякі властивості)

— Марк Гарсія

Відповіді:

114

У текстових вузлах не можуть бути застосовані поля або будь-який інший стиль, застосований до них, тому все, до чого потрібно застосувати стиль, повинно бути в елементі. Якщо ви хочете , щоб деякі з тексту всередині вашого елемента стилізувати інакше, загорнути його в spanабо div, наприклад.

— Яків
джерело

Я все-таки відчайдушно пропускаю :: до та :: після текстових вузлів.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.Справді. Вони можуть не приймати форматування, але вони, безумовно, беруть content.

— Synetech

Це абсолютно розумне запитання, як задати націлювання на текстовий вузол. Я усвідомлюю, що ОП спеціально сказав "запас", але це інші стилі, які можна застосувати до текстового вузла і які ви можете застосувати до текстового вузла, а не до батьківського вузла. Наприклад, скажіть, що я хотів, щоб під текстом було нижнє межу. Застосування цього нижнього кордону до текстового вузла отримало б бажаний результат, але застосувавши його, щоб сказати батьківський div, створило б нижню межу навколо всього діла. На жаль, звичайно, CSS не дозволяє націлити на текстовий вузол із додаванням HTML-елементів ... принаймні, як зараз.

— ВКК

Ви можете встановити шрифт для нього, безумовно, працює, але будь-який інший стиль не застосовується

— Хамід Бахманабади

Ви можете зробити тільки такі речі , як це для нині stackoverflow.com/questions/10645552 / ...

— fearis

Неможливо націлити текстові вузли за допомогою CSS. Я з тобою; Я б хотів, щоб ти міг ... але ти не можеш :(

Якщо ви не загортаєте текстовий вузол так, <span> як пропонує @Jacob , натомість можете надати навколишній елемент paddingна відміну від margin:

HTML

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

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}

— Річард JP Le Guen
джерело