(十一).CSS的选择器，盒子模型相关样式
1 CSS3 选择器
1.1 基本选择器（6个）
① 标签名选择器
标签名 {}
② 类名选择器
.类名 {}
③ ID 选择器
#ID名 {}
④ 全局选择器
* {}
⑤ 交集选择器
选择器1选择器2 {}
⑥ 并集选择器
选择器1,选择器2，选择器3 { }
1.2 层级选择器（4个）
① 后代元素选择器
选择器1 选择器2 { }
② 子元素选择器
选择器1 > 选择器2 { }
③ 后面的相邻兄弟元素选择器
选择器1 + 选择器2 { }
/*
相邻兄弟元素选择器的条件
1. 当前元素的后一个相邻兄弟元素
2. 满足+后面的选择器条件
*/
④ 后面的通用兄弟元素选择器
选择器1 ~ 选择器2 { }
/*
通用兄弟元素选择器的条件
1. 当前元素后面的所有兄弟元素
2. 满足~后面的选择器条件
*/
1.3 属性选择器（5个）
[attr] 选择具有attr属性的元素
[attr="val"] 选择attr属性的值是val的元素
[attr^="val"] 选择attr属性的值以val开头的元素
[attr$="val"] 选择attr属性的值以val结尾的元素
[attr*="val"] 选择attr属性的值中包含val的元素
[attr~="val"] 选择attr属性的值中包含以空格分隔的val的元素
/* 实际使用中， 属性选择器经常会与其他选择器进行组合（交集），注意属性选择器需要写在后面 */
img[width="200"] {}
div[title] {}
.item[alt] {}
/*
这里需要注意 .item 与 [class='item'] 是不一样的
.item是元素的class属性中有item 而[class='item']是class属性的值必须只是item
*/
1.4 伪类选择器（23个）
① 动态伪类选择器（5个）
:link 没有访问过的超链接
:visited 已经被访问过的超链接
:hover 鼠标悬停在上面的时候
:active 鼠标悬停在上面且鼠标按键按下
:focus 当元素获取焦点的时候
② 目标伪类选择器（1个）
:target
/*
选中url地址中的锚点元素
*/
③ 语言伪类选择器 (1个，了解)
:lang(语言)
④ UI元素伪类选择器（3个）
:checked 被选中的单选框、复选框、下拉选项
:disabled 不可用的表单控件，了解
:enabled 可用的表单控件，了解
⑤ 结构伪类选择器（12个）
:first-child 兄弟元素中的第一个
:last-child 兄弟元素中的最后一个
:nth-child(n) 兄弟元素中的第n个
:nth-last-child(n) 兄弟元素中的倒数第n个
:only-child 没有兄弟元素
:first-of-type 兄弟元素中同标签名的第一个
:last-of-type 兄弟元素中同标签名的最后一个
:nth-of-type(n) 兄弟元素中同标签名的第n个
:nth-last-of-type(n) 兄弟元素中同标签名的倒数第n个
:only-of-type 兄弟元素中没有同标签名的元素
:root 根元素（html）
:empty 既没有内容也没有后代
结构伪类的特殊用法
.box:nth-child(2n) { 偶数
}
.box:nth-child(2n-1) { 奇数
}
.box:nth-child(odd) { 奇数
}
.box:nth-child(even) { 偶数
}
.box:nth-child(3n) { 3的倍数
}
⑥ 否定伪类选择器（1个）
:not(选择器)
1.5 伪元素选择器（6个）
:first-letter / ::first-letter 选择到元素中的第一个字
:first-line / ::first-line 选择到元素中的一行字
:before / ::before 动态创建子元素放在第一个位置
:after / ::after 动态创建子元素放在最后一个位置
::placeholder` 设置输入框中placeholder文字的样式
::selection 设置被选中的文字的样式
1.6 选择器的优先级（权重）
1. ID 选择器
2. 类选择器、伪类选择器、属性选择器
3. 标签名选择器、伪元素选择器
4. 全局选择器
!important > 行内式 > 各种选择器
!important 只设置给某一个 css 属性
2 CSS3 新增盒子相关样式
① display 介绍
display 属性的值非常多，可以将任何元素设置成任何形态
② box-sizing 属性
规定 width 和 height 的设置规则，属性值如下：
content-box 默认值，width和height设置内容的宽高
border-box width和height设置总宽高 (包含边框和内边距和内容)
③ 盒子阴影 box-shadow
该属性值的设置规则如下：
1. 值中可以包含2 ~ 4 个长度，分别表示 水平偏移位置、垂直偏移位置、模糊值、外延值；长度必须按照顺序书写
2. inset关键字和颜色可以放在长度的前面或者后面
3. 可以给元素设置多阴影，多个阴影之间使用逗号分隔
/* 使用两个长度设置阴影的偏移位置 */
box-shadow: 5px 10px;
box-shadow: -5px 10px;
box-shadow: -5px -10px;
/* 设置偏移位置的同时设置颜色 */
box-shadow: 5px 5px pink;
box-shadow: yellow 5px 5px;
/* 设置阴影的模糊值 */
box-shadow: 5px 5px 15px;
box-shadow: 5px 5px 5px #ccc;
box-shadow: #099 5px 5px 15px;
/* 设置外延值 */
box-shadow: 5px 5px 15px 10px;
box-shadow: 5px 5px 15px 10px yellow;
box-shadow: yellow 5px 5px 15px 10px ;
/* 内阴影 */
box-shadow: 5px 5px inset;
box-shadow: -5px -5px inset;
box-shadow: inset 5px 5px 15px;
box-shadow: inset 5px 5px 15px yellow;
box-shadow: inset #f00 5px 5px 15px;
/* 多阴影 */
box-shadow: 5px 0 10px #f00,
0 5px 10px #ff0,
-5px 0 10px #080,
0 -5px 10px #099;
④ 不透明度 opacity
1. 取值 0 ~ 1之间， 值越大越不透明
2. 0 表示完全透明，1 表示完全不透明