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
2
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
58
Niemniej jednak desperacko brakuje mi :: before i :: after w węzłach tekstowych.
shabunc
6
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
12
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
1
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
50

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