(十一).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设置内容的宽高，padding,border另外计算
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 表示完全不透明