CSS选择器与标签的分类

1.复合选择器

(1)、交集选择器

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

        记忆技巧：交集选择器是并且的意思。 即...又...的意思

(2)、并集选择器

        如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

        记忆技巧：并集选择器是和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

(3)、后代选择器

        写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

         子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签

(4)、子代选择器

        子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。

 2.伪类选择器

(1)、链接伪类选择器

        :link 未访问的链接 

        :visited 已访问的链接

        :hover 鼠标移入时

        :active  鼠标单击时

        如果<a>标签四个伪类的书写顺序不正确，会导致链接的四种状态显示效果错乱，或有的状态会无效，为了避免这种情况，我们在设置的时候，务必保证书写顺序是正确的。，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）

        <a>标签伪类的书写顺序是a:link、a:visited、a:hover、a:active

(2)、清除无序列表的小点

        list-style:none;

(3)、清除a的下划线

        text-decoration:none

(4)、宽高属性

        注意数字后需+PX

3.标签显示模式

(1)、块状元素

        常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/caption/form等，其中<div>标签是最典型的块元素。

块级元素的特点：

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

  2、宽高可以设置

        3、独占一行

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

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

(2)、行内元素

        常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

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

2、宽高设置是无用的

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

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

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

注意：

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

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

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

(3)、行内块元素

        在行内元素中有几个特殊的标签——<img />、<input />、<label>、<select>、<option>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

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

            2、宽高是可以设置的

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

            4、一般不容纳其他元素

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

(4)、标签显示模式转换

        块转行内：display:inline;

        行内转块：display:block;

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

4.CSS 背景(background)

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

(1)、背景图片

        语法： background-image : none | url (url)

        参数： none :无背景图（默认的），url :使用绝对或相对地址指定背景图像

        background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

        小技巧： 我们提倡背景图片后面的地址，url不要加引号。

(2)、背景平铺

        语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y

        参数： repeat : 背景图像在纵向和横向上平铺（默认的），no-repeat : 背景图像不平铺，repeat-x : 背景图像在横向上平铺，repeat-y : 背景图像在纵向平铺

        设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

(3)、背景位置

        语法：background-position : length || length，background-position : position || position

        参数：length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left | center | right

        说明：设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

        注意：position后面是x坐标和y坐标。可以使用方位名词或者精确单位。

        如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则15px一定是x坐标top是y坐标。

(4)、背景附着

        语法：background-attachment : scroll | fixed

        参数：scroll : 　背景图像是随对象内容滚动

                   fixed : 　背景图像固定

        说明：设置或检索背景图像是随对象内容滚动还是固定的

(5)、背景简写

        建议如下写：

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

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