CSS复合选择器、元素的显示模式、背景图片的设置

CSS复合选择器

建立在基础选择器之上，对基本选择器进行组合形成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器（重要）

又称为包含选择器，可以选择父元素里面的子元素（包括儿子、孙子）。语法：

  元素1 元素2 {样式说明}   2是1的孩子，如无序列表、有序列表
  元素1 元素2 元素3{样式说明}  3是1的孙子，一层一层向下查找

元素1、元素2可以是任意的基础选择器。如：

 ol li {样式}    ol标签选择器
.nav li{样式}    .nav类选择器

子选择器（重要）

只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。语法：

    元素1 > 元素2 样式{}

并集选择器（重要）

可以选择多组标签，同时为他们定义相同的样式。并集选择器时各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。语法：

    元素1,元素2{样式声明}

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。其书写特点是用冒号（:）表示，比如 :honer/:first-child

链接伪类选择器

选择所有未被访问的链接

注意：
（1）为保证生效，编写是要按照LVHA的顺序声明：link、visited、hover、active。
（2）链接a的样式要单独指定
（3）一般开发时用 hover 就可以了

:focus 伪类选择器

用于选取获得焦点的表单元素。焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {
    background-color: pink;
    color: red;
}

复合选择器总结

CSS的元素显示模式

元素显示模式：元素（标签）以什么方式进行显示，如div可独占一行，一行可以放多个span标签。
HTML元素一般分为：块元素和行内元素两种

块元素

常见的有h1~h6、p、div、ul、ol、li等

特点：
（1）自己独占一行
（2）高度、宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素
（5）文字类的内容内不能放块级元素；如p、h1~h6标签内不能放div

行内元素

 a、strong、b、em、i、del、s、ins、span等，其中span标签是最典型的行内元素，也成内联元素。

特点：
（1）相邻行内元素在一行上，一行可以显示多个
（2）高度、宽度直接设置无效
（3）宽度默认是它本身内容的宽度
（4）只能容纳文本或其他行内元素
（5）a里面可以放块级元素，但是给a转换一下块级模式最安全

行内块元素

<img />、<input />、 <td>，他们同时具有块元素和行内元素的特点，成为行内块元素。
特点：
（1）和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
（2）宽度默认是它本身内容的宽度（行内元素特点）
（3）高度、行高、外边距以及内边距都可以控制。（块级元素特点）

元素显示模式总结

元素显示模式转换

当一个模式的元素需要另外一种模式的特性，比如增加链接标签a的触发范围。

• 转换为块级元素：display:block;

<style>
    a {
        height: 50px;
        width: 150px;
        background-color: #d4b6b6;
        display: block;
    }
</style>

• 转换为行内元素：display:inline;

div {
    display: inline;    变成行内元素之后就不能设置宽度高度了
}

• 转换为行内块：display:inline-block;

span {
    width: 200px;
    height: 100px;
    display: inline-block;
}

CSS的背景

通过css背景属性，给页面元素添加背景样式，背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色，一般情况下元素背景颜色默认值是transparent（透明的）。

背景图片

background-image，常见于logo或一些装饰性的小图片或者是超大的背景图片，优点是便于控制位置（精灵图也是一种运用场景）

background-image：none|https://blog.csdn.net/url(url)       默认none无背景图片,url使用绝对或相对地址

背景平铺

background-repeat属性

background-repeat: no-repeat / repeat / repeat-x / repeat-y

不平铺/平铺/沿x轴平铺/沿y轴平铺

背景位置

background-position属性

background-position: x y;    x/y可以使用方位名词或者精确单位

（1）方位名词：若x、y都是方位名词，则两个值的前后顺序无关，如top left和left top效果是一样的；如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐，如top；则为顶部居中
（2）精确单位：如果x、y都是具体的数值，则第一个数值一定是x，第二个一定是y，不能颠倒顺序。如果只指定了一个数值，则一定是x。另外一个默认center
（3）混合单位：如果指定的是一个是具体的数值，另一个是方位名词，则第一个值是x坐标，第二个值是y坐标

背景图像固定（背景附着）

background-attachment属性设置背景图片是否固定或者是随着页面的其余部分滚动。

background-attachment: fixed;   背景固定
background-attachment: scroll;  背景滚动（默认）

背景色半透明

background: rgba(0, 0, 0,0.3);   0.3可简写成.3

a取值0~1，0为完全透明，1为100%不透明；