CSS选择器与标签分类

一、CSS选择器

1.复合选择器

（1）.交集选择器

         交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

（2）.并集选择器

        并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如#one,div,.abc{  }

(3).子代选择器

     子元素选择器只能选择作为某元素子元素的元素。如div > p{ }，注意，符号左右两侧各保留一个空格。

（4）.后代选择器

       后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

2.伪类选择器

(1).链接伪类选择器

:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移入时 */

:active /* 鼠标单击时 */

(2).清除无序列表小点

{ list-style:none; }

（3）.清除a的下划线

{ text-decoration:none;}

 （4）.宽高属性

注意要加单位px

{

width:200px;

height:200px;

}

二、标签转化

块级元素的特点：

1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度

2、宽高可以设置

3、独占一行

4、可以容纳任意的元素（h/p元素不能容纳块状元素）

5、可以设置外边距和内边距的。

行内元素的特点：

1、有默认的宽高，宽高是内容所撑起来的

2、宽高设置是无用的

3、相邻的行内元素或者行内块元素在同一行上显示

4、只可以容纳行内元素与内容

5、水平方向上的外边距和内边距可以设置，垂直方向设置无用

注意：

1. 只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素

2. 链接里面不能再放链接

3. a里面可以放块级元素

行内块元素的特点：

1、有默认的宽高，是元素本身的宽高

            2、宽高是可以设置的

            3、相邻的行内元素或者行内块元素在同一行上显示

            4、一般不容纳其他元素

            5、外边距和内边距都是可以设置的

标签显示模式转换

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

三、背景

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议如下写：

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;