Problem mit benachbarten CSS-Selektor in Chrome und Safari in

Betrachten Sie die folgende (Fiddle finden Sie hier http://jsfiddle.net/burninromz/YDuzC/8/)Problem mit benachbarten CSS-Selektor in Chrome und Safari in

Was geschehen soll, wenn Sie das Kontrollkästchen klicken, sollte das entsprechende Etikett erscheinen. Dies funktioniert nicht in Safari und Chrome, sondern in IE, Firefox und Opera. Wenn Sie Elemente sowohl in Chrome als auch in Safari untersuchen, sehen Sie, dass der Stil tatsächlich auf das Element angewendet wird, aber nicht korrekt dargestellt wird. Irgendwelche Ideen, warum das ist?

Siehe unten.

html

<div> 
    <input type="checkbox"></input> 
    <span>Unchecked</span> 
    <span>Unchecked</span>

css

input[type="checkbox"]:checked + span { 
     display:none 
    } 

    input[type="checkbox"] + span { 
     display:block 
    } 

    input[type="checkbox"]:checked + span + span { 
     display:block 
    } 

    input[type="checkbox"] + span + span { 
     display:none 
    }

Dieser Selektor funktioniert nicht

input[type="checkbox"]:checked + span + span { 
    display:block 
}

Quelle

2013-09-03 CodeMonkey

Dieses * * kann ein Betrogene meiner Frage: http://stackoverflow.com/questions/17219286/why-does-the-general-sibling -combinator-allow-toggle-pseudo-elements-content (Ich bin mir nicht sicher, aber es scheint wahrscheinlich der gleiche Fehler zu sein). –

Wenn Sie stattdessen den allgemeinen Geschwisterkombinator auf Ihrem vorletzten Selektor verwenden, wird es funktionieren, als würden Sie FYI erwarten: http://jsfiddle.net/YDuzC/10/ – Adrift

Sie können versuchen, den Geschwisterkombinator zu verwenden. ~ ist ähnlich wie +, jedoch ist es weniger streng. Während ein benachbarter Selektor nur das erste Element auswählt, das sofort ist, dem der vorherige Selektor vorausgeht, ist dieser allgemeiner verallgemeinert. Es wird alle Elemente auswählen, solange sie dem vorherigen Selektor im Baum folgen.

So würden Ihre CSS so aussehen ...

input[type="checkbox"]:checked + span { 
    display:none 
} 

input[type="checkbox"] + span { 
    display:block 
} 

input[type="checkbox"]:checked ~ span ~ span { 
    display:block 
} 

input[type="checkbox"] + span + span { 
    display:none 
}

Hier ist ein funktionierendes Beispiel durch @Adrift zur Verfügung gestellt, die über Code verwendet: jsfiddle.net/YDuzC/10

Quelle

2013-09-04 00:08:54 Kirkland

Danke, ich endete tatsächlich mit einer ähnlichen Lösung, brauche nur 1 allgemeinen Selektor z 'input [type = "checkbox"]: checked + span ~ span'. Es funktioniert nur, wenn nur zwei untergeordnete Elemente vorhanden sind. Prolly muss es testen, wenn du mehr hast. Wie David Thomas dieses prolly im Zusammenhang mit dem Webkit-Problem erwähnt, wo Chrome und Safari bricht, wenn Selektoren mit Pseudoeigenschaften verwendet werden. – CodeMonkey

Schön. Vielleicht finden Sie auch diese nützliche ... [30 CSS Selektoren müssen Sie sich merken] (http://net.utsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/) – Kirkland

Danke, konnte dieses Problem mit ~ beheben. Dieses Problem gibt es auch in der Chrome-Version 31, aber es wird nur angezeigt, wenn Sie sich auf einer Seite befinden, die viel CSS verwendet. –

Ich würde verwenden, um das :content psuedo-Element

HTML

<div> 
    <input type="checkbox" class="check" /> 
    <span></span> 
</div>

CSS

span{ 
    display:block; 
} 

input[type="checkbox"] + span:before { 
    content:"Unchecked"; 
} 

input[type="checkbox"]:checked + span:before { 
    content:"Checked"; 
}

Example Pen

Quelle

2013-09-05 20:57:14

Problem mit benachbarten CSS-Selektor in Chrome und Safari in

Antwort

Verwandte Themen