CSS学习摘记

1、background属性：

{
	background:white url(app/arrow_collapse.png) no-repeat 93% 50%;
	background-size: 18px 12px
}

93%是背景图片位于此元素x轴位置，50%是位于y轴位置。

background-size是CSS3特性。
2、字符串超过容器长度自动显示省略号：

{
	white-space: nowrap;
	text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        width:100%;
	overflow:hidden;}
   

3、CSS制作冒泡框

<div class="bubble">Hello!How are you?</div>

.bubble{
    position:relative;
    left:50px;
    top:150px;
    height:50px;
    width:100px;
    background:#f3961c;
    border:gray solid 1px;
    border-radius:10px;
    padding:15px;
}
.bubble:after { 
content:"";
display:block; /* 针对 FF3.0 */ 
position:absolute; 
z-index:10; 
bottom:-30px; 
left:80px; 
width:0; 
height:0; 
border-width:15px 15px; 
border-style:solid; 
border-color:#f3961c transparent transparent; 
} 

效果：

4、子元素元素选择

li:first-child

li:nth-child(2),选中第二个元素，CSS3特性