简单总结一下第二天学习Sass的知识点

// 后代选择器
article section { margin: 5px } //祖先元素 后代元素 {}

// 子元素选择器
article > section { border: 1px solid #ccc } //父元素 子元素 {}

// 兄弟元素选择器 + ~
header + p { font-size: 1.1em } //选中元素 紧跟在选中元素的第一个p元素，如果header后面的第一个元素不是p标签，则该选择器不生效
div ~ p { color: #333 } //前一个~后面所有 选中后面所有指定兄弟元素

//分组选择器（并集选择器）
.p1,#p2,.p3...{} // 选择器1，选择器2，选择器n{} 选中多个选择器对应的元素

//复合选择器（交集选择器）注意选择器之间不能有空格，要紧挨着
span.s3 { font-size: 20px } //选中span标签class叫s3的元素

//伪类选择器 伪类表示元素的一种特殊状态
:hover   移入时元素的状态
:visited  已被访问过后的元素的状态
:active   被点击时元素的状态

//通配选择器 用来选中页面中所有的元素
*{ color:red }

//属性选择器 根据元素中的属性或属性值来选取指定元素
p[title*="bc"] { backgroud-color: yellow } //把所有title属性值中包含bc的p标签并设置成黄色背景
p[title="abc"] { color: red } //把所有title属性值为abc的p标签并设置成红色
p[title^="abc"] { color: red } //把所有title属性值以abc开头的p标签并设置成红色p[title$="abc"] { color: red } //把所有title属性值以abc结尾的p标签并设置成红色

#div {
　　~div{ font-size: 12px }; //选中#div后面所有的div标签
　　>p { backgroud: #eee }; //选中#div下所有的p标签
　　dl > {
　　　　dt { color: #333 };
　　　　dd { color: #fff };
　　};
　　nav + & { margin: 10px }
}　

div{
  border-style:solid;
  border-width:1px;
  border-color:#222;          
}
//改成：
div{
  border:{
    style:solid;
    width:1px;
    color:#222;     
  }  
}