Metin düğümleri için bir CSS seçici var mı?


173

(Açıkçası IE değil) yapmak istiyorum ne:

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

Bu da metin düğümüne bir kenar boşluğu bırakacaktır. (Bu mümkün mü?) CSS ile metin düğümünü nasıl alabilirim?


2
Sen kullanarak yaklaşır olabilir ::first-lineadından da anlaşılacağı gibi, sadece metnin ilk hat için geçerli olsa da,. (Ayrıca, sadece bazı özelliklerin üzerine ayarlanabileceğini düşünüyorum)
Mark Garcia

Yanıtlar:


114

Metin düğümlerinde kenar boşlukları veya başka bir stil uygulanamaz, bu nedenle stil uygulamanız gereken her şey bir öğede olmalıdır. Öğenizin içindeki metnin bir kısmının farklı bir şekilde biçimlendirilmesini istiyorsanız , örneğin bir spanveya içine sarın div.


58
Yine de umutsuzca :: düğümleri önce ve sonra :: düğümleri eksik.
shabunc

6
I'm nevertheless desperately missing ::before and ::after on text nodes.Aslında. Biçimlendirme yapamazlar, ama kesinlikle alırlar content.
Synetech

12
Bir metin düğümünün nasıl hedefleneceğini sormak son derece makul bir sorudur. Ben özel olarak "kenar boşluğu" dedi OP fark ancak onların bir metin düğümü uygulanabilir ve üst düğüme değil, bir metin düğümü uygulamak isteyebilirsiniz diğer stilleri vardır. Örneğin, metnin altında bir kenarlık alt istediğimi varsayalım. Bu kenarlık altını metin düğümüne uygulamak istenen sonucu verir, ancak üst div'ı söylemek için uygulamak tüm div çevresinde bir alt kenarlık oluşturur. Ne yazık ki CSS, HTML öğelerini ekleyerek metin düğümünü hedeflemenize izin vermiyor ... en azından şimdilik.
VKK

1
bunun için yazı tipi ayarlayabilirsiniz, kesinlikle işe yarıyor, ancak başka bir stil uygulanmadı
Hamid Bahmanabady

Şimdilik sadece böyle şeyler yapabilirsiniz stackoverflow.com/questions/10645552/…
fearis

50

CSS ile metin düğümlerini hedefleyemezsiniz. Seninleyim; Keşke yapabilseydin ... ama yapamazsın :(

Eğer bir metin düğümü sarın yoksa <span> @Jacob anlaşılacağı gibi , bunun yerine çevreleyen eleman verebilir paddingaksine margin:

HTML

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

CSS

p#theParagraph
{
    border: 1px solid red;
    padding-bottom: 10px;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.