一、CSS3 简介
1.兼容性写法
-moz- firefox
-webkit- 谷歌 苹果
-o- 欧朋
-ms- iE
2.css Hack
(1) CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的;
所以对浏览器的选择大致可以分为能力选择和怪癖选择（BUG）;
能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG;
(2) 尽量找到通用方法而减少对CSS Hack的使用;
大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题
二、CSS3 选择器
1.css3关系型选择器:
~ 普通兄弟选择器
2.属性选择器:
E[attr] 任何带有bttr属性名的标签;
E[attr = value] 属性值为"value"的标签
E[attr ~= value] 属性值中包含"value"单词的标签, 其他属性值通过空格隔开的标签
E[attr ^= value] 属性值以"value"开头的标签
E[attr $= value] 属性值以"value"结尾的标签
E[attr *= value] 属性值以包含"value"字符串的标签
E[attr |= value] 属性值以"value"开头, 并包含"value"的标签
3.伪元素选择器:
::before 在元素之前添加内容; ::after 在元素之后添加内容
:first-letter 向文本的第一个字符添加特殊样式，搭配浮动首字下沉的特效
:first-line 向文本的首行添加特殊样式
::selection 光标选中文本的样式, 默认为深蓝色, 写自己的网站可以用
::placehoder 占位符, 改变input框中的占位符文本样式
4.伪类选择器:
E:not(s) 给除s外所有E中添加样式
E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
E:target URL后面跟锚点#, 指向文档内某个具体的元素。
这个被链接的元素就是目标元素（target element）: target选择器用于选取当前活动的目标元素。
// ***-child
E:first-child 匹配父元素的第一个子元素E （E必须是父元素的第一个子元素）
E:last-child 匹配父元素的最后一个子元素E （E必须是父元素的最后一个子元素）
E:only-child 匹配父元素仅有的一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
// ***-of-type
E:first-of-type 匹配父元素下第一个类型为E的子元素
（不同的父元素，也是其父元素的首个类型为E的子元素，所以都会被命中）
E:last-of-type 匹配父元素下的所有E子元素中的最后一个
E:only-of-type 匹配父元素的所有子元素中唯一的那个子元素E
E:nth-of-type(n) 匹配父元素的第n个子元素E
E:nth-last-of-type(n) 匹配父元素的倒数第n个子元素E
// 属性类伪类
E:empty 空的: 匹配没有任何子元素的元素E（包括text节点, 注释节点算空）
E:checked 匹配用户界面上处于选中状态的元素E
E:enabled 匹配用户界面上处于可用状态的元素E
E：disabled 匹配用户界面上处于禁用状态的元素E
E:read-only 只读元素添加样式
E:read-write 只写元素添加样式
hasChildNodes() 返回Boolean, 验证是否有子节点
三、target 实现手风琴菜单
（1）效果图
（2）源码
// 样式
ul:not(:target){
display: none;
}
a{
display: block;
}
// 结构
<a href="#ul_01">标题一</a>
<ul id="ul_01">
<p>1</p>
<p>2</p>
<p>3</p>
</ul>
<a href="#ul_02">标题二</a>
<ul id="ul_02">
<p>1</p>
<p>2</p>
<p>3</p>
</ul>
<a href="#ul_03">标题三 </a>
<ul id="ul_03">
<p>1</p>
<p>2</p>
<p>3</p>
</ul>
四、两列定宽布局
（1）效果图
（2）源码w
/* CSS样式 */
.left {
width: 200px;
height: 300px;
background-color: #f00;
float: left;
}
// 方案一:
.right {
// calc(); 浏览器解析运算当中数据 注：减号前后必须有空格
width: calc(100% - 200px);
height: 300px;
background-color: #0f0;
float: left;
}
// 方案二:
.right {
// left 设宽并浮动，right 不设宽不设浮动；
height: 300px;
background-color: #0f0;
}
<div class="left"></div>
<div class="right"></div>
五、用less写css样式
less特点:
1.语法糖;
2.浏览器只认识html,css,js; less浏览器无法识别,使用的时候需要映入编译好的css文件;
3.因为第2点的原因，.less文件需要编译成.css文件, 让浏览器解析编译完成的css文件;
less编译成css几种方式:
1.浏览器直接编译, 走到服务端;
2.客户端工具: koala;
3.服务端: node
less的使用
1.less完全不需要管css代码，样式写入.less文件中, 后期维护也在, less中操作；
2.less两种编译方式: (1)normal 普通编译less; (2)compress 压缩编译less;
less 嵌套:
ul {
width: 600px;
li {
margin: 10px;
list-style: none;
background-color: #ccc;
a {
color: #000;
text-decoration: none;
&:hover {
cursor: pointer;
color: red;
}
}
}
}
less 内使用 calc():
width: ~'calc(100% - 200px)'; //这个运算是留给浏览器来运算的不是给less运算的
less中使用变量和函数
1.定义变量方式: @变量名 : 变量值;
2.函数 参数 : 可以写默认参数
.border02(@borderWidth) {
border: @borderWidth solid aqua;
}
3.调用
.div {
.border02(10px);
}
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
