学习css第二天之---CSS复合选择器（后代选择器、子元素选择器 、并集选择器、链接伪类选择器 ）、元素显示模式（块级元素、行内元素、行内块元素）、背景（背景图片、背景平铺、背景位置、背景固定）

一、CSS复合选择器

1.后代选择器

可以选择元素1所有的后代元素

语法：

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

注：

• 元素之间用空格隔开；
  后代选择器中的元素可以是任意一种基础选择器。

2.子元素选择器

选择元素1最近一级的子元素

语法：

元素1>元素2 {
      样式声明;
}

注：元素之间用>隔开。

例：
  将代码中的 香蕉 字体设置黄色

 <div class="nav">
        <a href="#">香蕉</a>
        <p>
            <a href="#">菠萝</a>
        </p>
  </div>

<style>
  .nav>a { color: yellow;}
<style>

3.并集选择器

集体声明，选择多组标签，同时设置相同样式。

语法：

元素1，
元素2 {
   样式声明;
}

注：

• 元素之间用逗号隔开，最后一个元素不加逗号；
• 并集选择器可以使用后代选择器和子代选择器。

4.链接伪类选择器

链接伪类选择器	说明
a:link	所有未被访问的链接
a:visited	所有被访问过的链接
☆ a:hover	鼠标悬停的链接
a:active	鼠标按下时的链接

注：链接伪类选择器的书写是有顺序的：link visited hover active，不能乱。

5.focus伪类选择器

在表单中突出显示当前获得焦点的表单元素。

input:focus {
         样式声明;
}

6.交集选择器（扩展）

语法：

标签1.class(#Id) {
    样式声明;
}

• 选择类名为Class(或id值为Id)的标签1

二、元素显示模式

元素显示模式分为两种：块元素和行内元素

1.块级元素 block

特点：

独占一行；
可以设置宽度、高度、外边距、边框和内边距；
宽度是默认父元素的宽度；
可以包含其他块元素和行内元素。

注：文本类元素中不要包含其他元素，主要存放文本（h1~h6标签和p标签）；

• 常见的块元素有：div 、ul、li、ol、h1~h6、p

2.行内元素 inline

特点：

一行可以显示多个；
不能设置宽度、高度；
宽度是内容的宽度
只能容纳文本或者其他行内元素

注：链接不能再包含链接。特殊情况下可以包含块元素。

• 常见的行内元素：a、span、strong、em、ins、del等。

3.行内块元素 inline-block

特点：

一行可以显示多个；
默认宽度是本身内容的宽度；
可以设置宽度、高度、外边距、边框和内边距；

• 常见行内块元素有：img 、input、td。

4.显示模式转换

• display: inline 转换为行内元素；
• display: block 转换为块元素；☆
• display: inline-block 转换为行内块元素。☆

5.单行文字垂直居中对齐

• line-height: 盒子的高度;

三、背景图片

1.背景颜色

• 元素的背景颜色默认transparent透明的

background-color: blue;
或background-color: rgba(red,green,blue,alpha);设置半透明背景

2.背景图片

background-image: none|url(图片地址)
用背景图片的优势是容易控制位置。

2.背景平铺

background-repeat: repeat; 默认平铺

参数	说明
repeat	水平垂直平铺
no-repeat	不平铺
repeat-x	水平平铺
repeat-y	垂直平铺

4.背景位置

background-position: 方位名词 或 精确单位（像素值） 或 方位名词和像素 值混合使用;

4.1 方位名词：

• 水平方向 left、center、right
• 垂直方向 top、center、bottom

background-position: left top;

注：

• left 与 top的位置可以互换，都能实现相同的效果。
• 如果只写一个方位名词，另一个则默认居中对齐center

让图片水平垂直居中：background-position: center;

4.2 精确单位

  background-position: x y;

注：

• 单位是px像素；
• x与y的位置是不能互换的；
• 如果只写一个值，则一定是x轴方向，y轴默认垂直方向居中。

4.3 混合单位

 background-position: 20px top;

注：

• 第一个值一定是x ，第二个值一定是y

5.背景固定

background-attachment: scroll（默认，背景图像跟随滚动）、fixed（背景图像固定）;

6.背景混合写法（开发中用的最多）

background: color image repeat attachment position;
注：没有顺序，想写哪个写哪个。

补充：
背景色半透明：background-color: rgba(); 不影响盒子里的内容；
盒子半透明：opacity: 取值0~1; 盒子里的内容也会变透明。

---

好了，今天就到这里了，感谢观看！
今天你努力写代码了吗？