display: none auf alle, aber das erste Kind Element

Question

<p><span>*</span>Here lies a note.</p> 

CSS verwenden, wie kann ich mich verstecken (das heißt, display:none) der Text „Hier liegt eine Notiz.“ Und zeigen nur die „*“?

Answer 1

Da Sie keine Textknoten mit CSS auswählen können, besteht eine Möglichkeit darin, font-size des übergeordneten Elements auf 0 zu setzen, wodurch der gesamte Text effektiv ausgeblendet wird. Dann können Sie den Text für das gewünschte Element zurücksetzen.

.target { 
 
    font-size: 0; 
 
} 
 
.target > :first-child { 
 
    font-size: 16px; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

Alternativ können Sie auch die visibility property auch nutzen (da Sie ein untergeordnetes Element zu visibility: visible festlegen können, auch wenn das übergeordnete Element zu visibility: hidden gesetzt:

.target { 
 
    visibility: hidden; 
 
} 
 

 
.target > :first-child { 
 
    visibility: visible; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

Als Randbemerkung, gesetzt, wenn Sie eine Alternative möchten, können Sie die Textknoten mit <span> Elemente mit JavaScript wickeln und dann die display aller Kinder Element, das nicht das erste Kind zu none verwenden der Wähler:

.target > :not(:first-child) { 
    display: none; 
} 

Hier ein Ausschnitt demonstriert dies:

var target = document.querySelector('.target'); 
 
Array.from(target.childNodes).forEach(function (node, index) { 
 
    if (node.nodeType === 3 && node.nodeValue.trim()) { 
 
    var span = document.createElement('span'); 
 
    span.textContent = node.nodeValue; 
 
    target.replaceChild(span, node); 
 
    } 
 
});

.target > :not(:first-child) { 
 
    display: none; 
 
}

<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

---

Wenn Sie jQuery verwenden, wäre es sogar noch kürzer sein:

$('.target').contents() 
 
    .filter(function() { 
 
    return this.nodeType === 3 && this.nodeValue.trim(); 
 
    }).wrap('<span />');

.target > :not(:first-child) { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="target"> 
 
    <span>First node</span> 
 
    Second node 
 
    More text nodes... 
 
</p>

Answer 2

Sie visibility Elternteil verstecken können und untergeordnetes Element zeigen.

p { 
 
    visibility: hidden; 
 
} 
 
p > :first-child { 
 
    visibility: visible; 
 
}

<p><span>*</span>Here lies a note.</p>