前几天, 听着音乐时,随机播放到这一曲<<Rhapsode in Blue(extract)>>,来自<<Best Piano Classics 100 (CD2)>>内track03.突然间,心中一股难以表达的心情.当然其他专辑也有,比如:<<The 50 Most Essential Pieces of Classical Music>>,当然也有电影Manhattan发行于1979年的插曲也是.
就是这曲,有一次几乎花了2,3个小时翻遍了每一首歌曲,却没有找到它,这次偶然再次遇到,当然不能再次忘记它的曲名,那么这个交响乐实际上应该是叫做<<Rhapsody in Blue>>于1924年美国作曲家乔治·格什温创作的.至于他的音乐背景大家可以自己去了解下.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
border: 1px solid #000;
margin: 0;
padding: 0;
list-style: none;
float:left;
}
ul li {
background:#eee;
color: #F00;
margin: 50px;
}
.first {
color: #000;
margin-top: 0 !important;
margin-left: 0 !important;
}
.last {
color: #0f0;
margin-bottom: 0 !important;
margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
<li class="first">Hello, This is first element</li>
<li>WOW, so many elements</li>
<li>WOW, so many elements</li>
<li>WOW, so many elements</li>
<li class="last">Here it is, The last element</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
border: 1px solid #000;
margin: 0;
padding: 0;
list-style: none;
float:left;
}
ul li {
background:#eee;
color: #F00;
margin: 50px;
}
ul li:first-child {
color: #000;
margin-top: 0 !important;
margin-left: 0 !important;
}
ul li:last-child {
color: #0f0;
margin-bottom: 0 !important;
margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
<li>Hello, This is first element</li>
<li>Whidy! so many elements</li>
<li>Whidy! so many elements</li>
<li>Whidy! so many elements</li>
<li>Here it is, The last element</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
border: 1px solid #000;
margin: 0;
padding: 0;
list-style: none;
float:left;
}
ul li {
background:#eee;
color: #F00;
margin: 50px;
}
ul li:nth-child(2n) {
color: #000;
margin-top: 0 !important;
margin-left: 0 !important;
}
</style>
</head>
<body>
<ul>
<li>Hello, This is first element</li>
<li>Whidy! so many elements</li>
<li>Whidy! so many elements</li>
<li>Whidy! so many elements</li>
<li>Here it is, The last element</li>
</ul>
</body>
</html>
当然这个在IE8以下包括IE8的版本都是不被支持的 😯 !
最后总结一下:first-child和:last-child伪类在IE6下是完全不支持的,而IE7和IE8仅支持:first-child,IE9是完全支持的.而:nth-child只有IE9支持,其他的比如Safari 3+, Firefox 3.5+ and Chrome 1+是完全支持以上效果的.