Day-33

CSS选择器与标签的分类

一 知识点

(1)、交集选择器

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

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

比如：p.one选择的是类名为.one的段落标签。

(2)、并集选择器

并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

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

比如：.one, p, #test{color: #F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

(3)、后代选择器

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

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

(4)、子代选择器

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

白话：这里的子，指的是亲儿子，不包含孙子、重孙子之类。

比如：.demo > h3 {color: red;}说明h3一定是demo亲儿子。demo元素包含着h3。

2.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点，比如: .demo{}而我们的伪类用2个点就是冒号。比如:link{}

(1)、链接伪类选择器

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

:hover     /* 鼠标移动到链接上 */

:active     /* 选定的链接 */

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

注意写的时候，他们的顺序尽量不要颠倒，按照lhav的顺序。

3.标签显示模式

标签的类型(显示模式)。HTML标签一般分为块标签、行内标签与行内块标签三种类型，它们也称块元素和行内元素。具体如下：

(1)、块状元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/td/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)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

(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:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

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

二丶总结

见CSS选择器与标签的分类总结