前端入门系列--CSS（2）

上一篇介绍了CSS的三种引入方式、选择器的4中形式、字体样式4个属性、外观样式（颜色、文本对齐、行间距、首行缩进、文本装饰）以及一些快捷语法；
这篇将介绍符合选择器、标签显示模式、CSS背景、CSS三大优先级；

1 CSS复合选择器

上一篇文章讲到的是基础选择器，而这里的复合选择器是由两个或者两个以上的基础选择器组成的；

1.1后代选择器（常用）

父级 子级
		{
		   属性:属性值;
	      属性:属性值;
	    }

父子级之间以空格隔开，可以多层，但是一般不超过三层；

1.2子元素选择器

父级>子级
		{
		   属性:属性值;
	       属性:属性值;
	    }

相比前面，其只能是对父级中的子级，不能孙级，如下：
对于以下内容部分

<div>
	<p>
	   <span>内容</span>
	</p>
</div>

其中内容部分如果用后代选择器div span{xxx}则其会得到样式，而使用div>span则不能获得样式

1.3交集选择器（不建议使用）

标签选择器.类名
		{
		   属性:属性值;
	       属性:属性值;
	    }

1.4并集选择器（重点）

对于需要使用同一个类名的标签，可以使用并集选择器节省代码：

选择器1,选择器2，选择器3,,,
		{
		   属性:属性值;
	       属性:属性值;
	    }

注意选择器可以是标签选择器、类选择器、id选择器都可，小心其各自的形式即可

1.5伪类选择器（重点）

伪类选择器有很多，先将链接伪类选择器，其主要是针对a标签的各种效果（未访问、已访问、鼠标移到…）

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */

注意其不限于a，很多东西都可以有这个效果

实际开发中很少会写四个，一般只写hover效果：

a:hover { 
			color: red; /*  鼠标经过的时a标签中文字变成红色 */
}

# 2 标签显示模式 其主要有三种显示模式，分别介绍如下：

2.1块级元素

常见的块元素有h1-h6、p、div、ul、li、ol等，其中

标签是最典型的块元素

（1）独占一行；
（2）高度，宽度、外边距以及内边距都可以控制；
（3）宽度默认是容器（父级宽度）的100%；
（4）是一个容器及盒子，里面可以放行内或者块级元素（但是p以及hx标签中不能放其他块元素）；

2.2行内元素

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中标签最典型的行内元素
（1）相邻行内元素在一行上，一行可以显示多个；
（2）高、宽直接设置是无效的（若要设置先转换类型）；
（3）默认宽度就是它本身内容的宽度；
（4）行内元素中只能放文本或者行内元素不能放块元素，但有时a标签中放其他块元素（必须转换a的类型）

2.3行内块元素

在行内元素中有几个特殊的标签：img 、input 、td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙（后面的浮动相关内容会克服这个缺点），一行可以显示多个；
（2）默认宽度就是它本身内容的宽度；
（3）高度，行高、外边距以及内边距都可以控制；

2.4三种之间的互相转换

转成块元素：display:block；
转成行内元素：display:inline；
转成行内块元素：display:inline-block;
此外，display:none;则是将该元素隐藏起来

3、CSS背景相关

前面三点较为简单只需根据属性填写即可；
1、对于position，具体如下：

background-position : length || length
background-position : position || position

length时可用百分数或者数字；position则有top | center | bottom | left | center | right 方位名词；
对于超大背景图，如一些游戏网站的背景图，一般使用以下做法使图片居中对齐：

2、对于背景附着attachment，设置背景图片是否会跟随内容滚动，fixed则是背景固定（拖动滚动条时背景一直是这个位置只有文字在走），而scroll则是滚动，文字向下走背景也在变；
3、背景透明是常用的效果之一，其值中的最后一个值代表透明的程度；

4、CSS三大特性

4.1CSS层叠性

当一个标签被应用了多个样式后（即样式叠加），会选择后面的样式（后来居上，就近原则）

4.2CSS继承性

子标签会继承父标签的样式属性（如text、font、line、color），比如说对于div中的p，如果给div设置了样式则其中的p也会有相应的效果，当我们在对一些子元素给予样式时只需给其父元素则可以省略代码

4.3CSS优先级

当选择器相同时会出现上面层叠性问题，当选择器不同但都指向同一个对象时则是优先级问题

对于符合选择器则需用到叠加，上面从左到右权重变小，相加时没有进位；

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1
  注意a:hover即可；此外注意分辨是否是继承关系，其权重为0；