Wie kann ich einen Textknoten anvisieren?

Question

ich eine Seite mit der Struktur Targeting

<div class="x"> 
    <span>This should be visible</span> 
    <span>This should be visible</span> 
    This shouldn't be. 
</div> 

Dies ist keine Seite, die ich besitze, so kann ich die Struktur oder fügen Sie Tags nicht ändern. Ich erstelle nur ein benutzerdefiniertes Stylesheet, ich kann nur CSS verwenden.

Mein erster Gedanke war

div.x { display: none; } 
div.x span { display: inline; } 

zu versuchen, aber dies scheint nur das gesamte Element zu verstecken unabhängig.

Answer 1

MitvisibilityEigenschaft:

Ein Ansatz, die der Textknoten Inhalt des Elements zu verstecken wäre visibility: hidden auf der übergeordneten div zu setzen und es dann für die span außer Kraft setzen.

Der Nachteil der Verwendung von visibility: hidden wäre, dass es ein Leerzeichen zurücklassen würde, wenn es nach dem Textknoten noch ein anderes Element gibt (siehe unten).

div.x { 
 
    visibility: hidden; 
 
} 
 
div.x span { 
 
    visibility: visible; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>

---

Mitfont-sizeEigenschaft:

Anderen Ansatz wäre font-size: 0px für die Eltern zu setzen und es dann für die span außer Kraft setzen.

Der Nachteil dieses Ansatzes ist, dass Sie wissen müssen, was die font-size der untergeordneten Elemente sein würde.

div.x { 
 
    font-size: 0px; 
 
} 
 
div.x span { 
 
    font-size: 16px; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>

---

MitcolorEigenschaft:

Ein weiterer Ansatz wäre color: transparent zu setzen (wie Paran0a weist darauf hin) für die Eltern und dann außer Kraft für die span.

Der Nachteil ist, dass Sie wissen müssen, wie die Farbe der untergeordneten Elemente aussehen würde und dass der Text den Raum belegen würde, weil er immer noch da ist, aber nur in der Farbe transparent ist (siehe unten).

div.x { 
 
    color: transparent; 
 
} 
 
div.x span { 
 
    color: black; 
 
}

<div class="x"> 
 
    <span>This should be visible</span> 
 
    <span>This should be visible</span> 
 
    This shouldn't be. 
 
    <span>Some other tag</span> 
 
</div>