回顾：
- h5新增语义化标签
- h5新增表单和表单属性
目标：
- 什么是css3
- css3新增的选择器和伪类
一、CSS3概述
1.1、历史
- CSS3 是 层叠样式表(Cascading Style Sheets) 语言的最新进展，目的在于扩展 CSS2.1。 它为我们带来了许多期待已久的新特性， 例如圆角，阴影，gradients(渐变)，transitions(过渡) 或 animations(动画) 。
- CSS3是一个没有准确边界的一个概念，很难说某一个属性或者某一个选择器是不是CSS3的内容，还是CSS2.1内容。因为都是不同时期被浏览器厂商广泛采用，倒逼W3C把这个属性、选择器定为标准的。
1.2、兼容性
CSS3现在主要用于移动端，因为移动端没有IE浏览器，PC端真需要再等两年才能完全使用。
- 哆啦A梦CSS3测试：
二、css3新增选择器
CSS3选择器使用的时候，考虑的是高版本浏览器，或移动端。
- CSS2中，选择器7种：
- id选择器 #box
- 类选择器.red
- 标签选择器p
- 后代 div p
- id选择器 #box
- 并集 div，p
- 通配符 *
2.1、选择器
1.子代选择器
子代选择器 “>”: 匹配第二个选择器，切为第一个选择器内元素的子代。
必须是儿子！！！不是后代，必须是儿子！！！
2.兄弟选择器
兄弟选择器 "+ ":匹配紧跟第一个选择器，并且匹配第二个选择器内的元素。
| 选择器 | 说明 |
|---|---|
| + | 下一个兄弟 |
| ~ | 下所有兄弟 |
| :not( ) | 排除选择器,需要被排除的选择器，写到括号内。 |
+ 下一个兄弟，next sibling
<h3>我是H3</h3>
<p>我是P</p>
<p>我是P</p>
<p>我是P</p>
<h3>我是H3</h3>
<p>我是P</p>
<p>我是P</p>
h3+p{
color:green;
}
~ 后面所有兄弟，next all siblings
h3~p{
color:green;
}
[
button~button{
margin-left: 10px;
}
:not( )排除选择器,需要被排除的选择器，写到括号内。(了解)
<p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我「不是」一个段落。</div>
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
color: green;
}
/* 非 <p> 元素 */
body :not(p) {
text-decoration: underline;
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
2.2、属性选择器
选取标签带有某些特殊属性的选择器 我们称为属性选择器
在CSS2.1层面，只能通过id属性、class属性选择元素。Css3可以根据任意属性选择元素了。
2.3、结构伪类选择器
- 注意 nth-child（n）n可以是数字，关键字和公式 （关键字 even odd）
三、伪类
CSS2.1中，只能给a标签增加伪类。a:link、a:visited、a:hover、a:active。
3.1、:hover
:hover这个选择器，在CSS3中，能够给任何元素使用了。
3.2、 :focus得到焦点时
当一个表单元素有焦点，那么就能够被:focus伪类选中。
3.3、 :only-child 唯一的子元素(父亲有且只有一个子元素)
-
如果一个p是某一个元素的唯一的儿子，那么选择它。
-
p:only-child { color: red; }<p>1</p> <p>1</p> <p>1</p> <p>1</p> <div> <p>1</p> </div>
3.4、empty 空标签
当一个标签是完全首尾相接，没有任何的空格、tab、换行、文字，就是:empty
<div></div> → 满足div:empty
<div>我</div>
```cssdiv:empty{ width: 100px; height: 100px; background-color: #FF0000;}
#### 3.5、:checked 选中的
单选按钮、复选框，如果被勾选，那么能被伪类:checked选中
```html
<input type="radio" name="sex" id="aa" /> <label for="aa">男生</label> <input type="radio" name="sex" id="bb" /> <label for="bb">女生</label>
input:checked+label { font-weight: bold; color: red; }
)]
3.6、1.7 :disabled和:enabled(匹配启用（禁用）状态的元素)
无效和有效的input控件。
<input type="text" disabled/><input type="text" />
input:disabled{ background-color: aqua;}input:enabled{ background: red;}
四、伪元素
伪元素之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
4.1、::before和::after
- 注意：
- before 和 after 必须有 content 属性
- before 在内容的前面，after 在内容的后面
- before 和 after 创建一个元素，但是属于行内元素。
- 因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
p::before{ content: '我在p前面 ';}p::after{ content: ' 我在后面';}
<p>我是p</p>
4.2、被选中的文字样式
p::selection{ background-color: orange; color:white;}
<p>我是一段很长很长很长的文字</p>
4.3、::first-letter和::first-line
::first-letter文本的第一个单词或字（如中文、日文、韩文等）
::first-line 文本块的首行，如p::first-line表示选择p元素的首行；
<p class="txt"> 我又是一段很长很长很长很长很长很长很长很长很长很长很长很长的文字 </p>
.txt{ width: 100px;}.txt::first-letter{ color: aquamarine;}.txt::first-line{ text-decoration: underline;}
五、边框圆角 border-radius
border-radius属性，值可以是一个px为单位的数值，也可以是%为单位的百分比数值。
<div class="one"></div><div class="two"></div>
.one{ width: 100px; height: 100px; border-radius: 10px; background-color: #7FFFD4;}.two{ width: 100px; height: 100px; border-radius: 50%; background-color:crimson;}
- 拆开描述四个角落：
border-radius: 20px 40px 60px 80px;
分别是左上角、右上角、右下角、左下角 - 也可以是三个数值：
border-radius: 20px 60px 80px;
分别是：左上角、右上角和左下角、右下角 - 也可以通过小属性来层叠：
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-right-radius: 100px;
border-bottom-left-radius:50px;
六、投影 box-shadow和text-shadow
6.1、盒子投影
- 标准的是5个参数，IE9开始兼容。
box-shadow: 水平偏移 垂直偏移 羽化大小(模糊半径) 投影大小(延展宽度) 颜色;
box-shadow: 2px 2px 2px 2px black; - 可以省略参数：
可以省略投影大小
box-shadow: 2px 2px 2px black;
第三个值(羽化) 不可以为负值。 - 经验： 要快速设置盒子投影，其实写3个值就够了。
- 其他： 盒子投影如果不设置颜色，默认和文字颜色(color)一样，边框(border)也有这个特性。
<div>1</div>
.one{ margin: 100px auto; width: 100px; height: 100px; box-shadow: 0 0 5px ; color: #7FFFD4;}
)]
- 内阴影：如果需要内投影，只需在后面加 inset，注意没有outset;
6.2、文字阴影
- 文字阴影(CSS3)以后我们可以给我们的文字添加阴影效果了
- shadow 影子
- text-shadow:水平位置 垂直位置 模糊距离 阴影颜色
前两项是必须写的。
后两项可以选写。 - 用法和盒子投影(box-shadow)类似。
- 修饰类属性，如圆角，盒子投影，文字投影，不影响文档流，可放心使用。
- 文字投影被称之为移动端的性能杀手，不要大面积的在段落出现。
如果一定要出现的话，可把羽化值设置为0。
text-shadow是文字阴影，只有四个参数，少了延展值，IE10开始兼容。
text-shadow: 3px 5px 5px;
七、CSS3盒模型
移动端大量使用 CSS3盒子模型box-sizing
- 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
- CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
- 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
- 移动端可以全部CSS3 盒子模型
- PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
