CSS基础-2

@[TOC]（CSS基础-2）

CSS高级选择器

层级选择器

多层标签嵌套时，选中指定标签的子标签；

选择器	类型	功能描述	举例
A B	后代选择器	选中A标签的后代标签中所有的B标签	(div p)会选中示例1-5
A>B	子选择器	选中A标签的子标签中的所有B标签	(div>p)会选中示例3-5
A+B	相邻兄弟选择器	选择和A标签同级的位于A标签后面的第一个B标签	(span+p)会选中示例3
A~B	通用兄弟选择器	选中和A标签同级的位于A标签后面的所有B标签	(span~p)会选中示例3-5

<div>
	<span>
		<p>示例1</p>
	</span>
	<span>
		<p>示例2</p>
	</span>
	<p>示例3</p>
	<p>示例4</p>
	<p>示例5</p>
</div>

结构伪类选择器

选择器	功能描述
A：first-child	选中A标签的父元素的第一个子元素A
A：last-child	选中A标签的父元素的最后一个子元素A
A B：nth-child(n)	选中A标签中的第n个B标签
A:first-of-type	选中A标签的父类标签下的第一个A类型标签
A:last-of-type	选中A标签的父类标签下的最后一个A类型标签
A B:nth-of-type(n)	选中A标签下的第n个B类型标签

属性选择器

选中带有指定属性（或属性值符合条件）的指定标签；
选择器基本格式为：标签[属性]
需要对属性值做出要求时：标签[属性=value]

属性选择器	功能描述
A[attr]	选中带有attr属性的A标签
A[attr=vla]	选中带有attr属性，且attr属性值为val的A标签（val区分大小写）
A[attr^=val]	选中带有attr属性，且attr属性值以val开头的A标签
A[attr$=val]	选中带有attr属性，且attr属性值以val结尾的A标签
A[attr*=val]	选中带有attr属性，且attr属性值带有val的A标签

盒子模型

边框

边框（border）有三个属性：粗细，线条样式，颜色
粗细：border-width，可设置thin,medium,thick分别代表细线，中等线和粗线，也可以直接设置像素单位的数值;

表达方式	含义
border:1px	四边边框宽度均为1px;
border:1px 2px	上下边框宽度为1px，左右边框宽度为2px
border:1px 2px 3px	上边框宽度为1px，左右边框宽度为2px，下边框宽度为3px
bordre:1px 2px 3px 4px	上右下左边框宽度分别为1px 2px 3px 4px

边框也可以通过border-top-width方式单独设置
颜色：border-color，可以直接使用英文颜色，也可以使用RGB配色，格式为#000000（每两个数字代表一个原色数值，数字为16进制，大小为0-255）；设置方式同粗细设置；

属性值	线条样式
none	无
hidden	隐藏
dotted	点画线
dashed	虚线
solid	实线
double	双线

设置方式同粗细设置；

内边距

padding，为内容区与边框border之间的间距，值算在盒子总尺寸之中；
padding设置方式同边线

外边距

margin，边线border以外的部分，可理解为其余元素与本元素的最小间距。
当两个div盒子上下相邻，上盒子的margin-bottom值和下盒子的marin-top值并非相加关系，而是取大值，左右方向相同。
而对于span，垂直方向的margin值无效，水平方向的margin值相邻取和；