Czy istnieje selektor CSS dla węzłów tekstowych?

173

To, co chciałbym zrobić (oczywiście nie w IE) to:

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

Co dałoby węzłowi tekstowemu margines. (Czy to w ogóle możliwe?) Jak uzyskać węzeł tekstowy z CSS?

css css-selectors

— Rudie
źródło

Możesz to przybliżyć używając ::first-line, choć jak sama nazwa wskazuje, dotyczy to tylko pierwszego wiersza tekstu. (Myślę też, że można na nim ustawić tylko niektóre właściwości)

— Mark Garcia

Odpowiedzi:

114

Węzły tekstowe nie mogą mieć zastosowanych marginesów ani żadnego innego stylu, więc wszystko, do czego potrzebny jest styl, musi znajdować się w elemencie. Jeśli chcesz, aby część tekstu wewnątrz elementu miała inny styl, zawiń ją na przykład w znak spanlub div.

— Jakub
źródło

Niemniej jednak desperacko brakuje mi :: before i :: after w węzłach tekstowych.

— shabunc

I'm nevertheless desperately missing ::before and ::after on text nodes.W rzeczy samej. Mogą nie przyjmować formatowania, ale z pewnością przyjmują content.

— Synetech

Pytanie, jak kierować na węzeł tekstowy, jest całkowicie rozsądne. Zdaję sobie sprawę, że OP konkretnie powiedział „margines”, ale są to inne style, które można zastosować do węzła tekstowego i które możesz chcieć zastosować do węzła tekstowego, a nie do węzła nadrzędnego. Na przykład, powiedzmy, że chcę mieć obramowanie na dole pod tekstem. Zastosowanie dolnej krawędzi obramowania do węzła tekstowego przyniosłoby pożądane rezultaty, ale zastosowanie jej do określenia nadrzędnego elementu DIV spowodowałoby utworzenie dolnej krawędzi wokół całego elementu div. Niestety, CSS nie pozwala na ukierunkowanie na węzeł tekstowy poprzez dodanie elementów HTML ... przynajmniej na razie.

— VKK

możesz ustawić dla niego czcionkę, z pewnością działa, ale żaden inny styl nie jest stosowany

— Hamid Bahmanabady

Możesz robić tylko takie rzeczy w ramach stackoverflow.com/questions/10645552/ ...

— strach

Nie możesz kierować na węzły tekstowe za pomocą CSS. Jestem z tobą; Chciałbym, żebyś mógł ... ale nie możesz :(

Jeśli nie <span> zawiniesz węzła tekstowego w sposób, który sugeruje @Jacob , możesz zamiast tego podać otaczający element, paddinga nie margin:

HTML

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

CSS

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

— Richard JP Le Guen
źródło