8 svar · 338 visningar · startad av Skarre
Jag lyckades inte googla fram något vettigt, så jag hoppas att någon kan förklara vad >-symbolen innebär i css. Jag såg nyligen något liknande detta
#container {
position:relative;
height:100%;
width:100%;
min-height:100%;
}
body > #container {
height:auto;
}
Vad innebär ">"?
child selector http://www.w3.org/TR/REC-CSS2/selector.html#x13
Tack!
Pjuh. jag var rädd du ville ha en förklaring på praktisk tillämpning också :e ;)
Och IE verkar inte alls ha stöd för detta?
nitro2k01 skrev:
Och IE verkar inte alls ha stöd för detta?
Inte en susning egentligen, men att IE brister i stöd för css(2) är väl inte någon nyhet ;)
<html>
<head>
<style type="text/css">
div {border: 1px solid black; margin: 5px;}
body > #div1 {background: green;}
</style>
</head>
<body>
<div id="div1">
div1
</div>
</body>
</html>
gör vad det ska i FF och Opera, men tydligen inte i IE6. Värt att notera...
Om man tittar på koden jag postade så kanske det används just eftersom IE inte har stöd för child selectors (om det nu är på det viset). Varför annars först sätta höjden till 100% och sedan ändra till auto?
Jag hittade i alla fall en bra förklaring av skillnaden mellan "child selectors" och "descendant selectors".
http://www.westciv.com/style_master/academy/css_tutorial/selectors/child_selectors.html
ok, här kommer en förklaring på koden.
/* Vi vill ha sidan 100% hög. */
#container {
position:relative;
height:100%; /* IE behandlar height som min-height. */
width:100%;
min-height:100%; /* Enligt standarden. */
}
body > #container { /* IE förstår child selectorn. */
height:auto; /* Rätta till height. */
}
Det är alltså ett sätt att få 100% höjd som fungerar även med IE. Om vi inte hade tagit hänsyn till IE hade det sett ut såhär:
#container {
position:relative;
width:100%;
min-height:100%;
}