8 CSS复合选择器

1.CSS复合选择器

目标

• 理解
  • 理解CSS复合选择器分别的应用场景
• 应用
  • 使用后代选择器给元素添加样式
  • 使用并集选择器给元素添加样式
  • 使用伪类选择器

为什么要学习CSS复合选择器

CSS选择器分为 基础选择器 和 复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

• 目的是为了可以选择更准确更精细的目标元素标签
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1.1 后代选择器（重点）

• 概念：
  • 后代选择器又称为包含选择器
• 作用：
  • 用来选择元素或元素组的子孙后代
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。

  父级 子级 {
      属性: 属性值;
      属性: 属性值;
  }

 

 

• 语法：

  .class h3 {
      color: red;
      font-size: 16px;
  }

   

• 当标签发生嵌套时，内层标签就成为外层标签的后代
• 子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签。

1.2 子元素选择器

 

 

• 作用：
  • 子元素选择器只能选择作为某元素子元素（亲儿子）的元素
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 ' > ' 进行连接
• 语法：

  .class>h3 {
      color: red;
      font-size: 14px;
  }

  1.3 交集选择器

• 条件
  • 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点
• 语法：

•  

  h3.class {
      color: red;
      font-size: 14px;
  }

   

• 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
• 记忆技巧：
  • 交集选择器是 既---又---的意思
• 用的相对来说比较少，不建议使用

• /*需求：让带.red类的p标签文字变成红色*/
  /*交集选择器  既是p标签  又是 .red 类选择器的关系*/
   <p class="red">红色p</p>
   <p class="red">红色p</p>
   <p class="red">红色p</p>
   <div class="red">红色div</div>
   <div class="red">红色div</div>
   <div class="red">红色div</div>
   <p>蓝色</p>
  <p>蓝色</p>
  <p>蓝色</p>
  
  <style>
  p.red {
      color: red;
  }
  </style>

  1.4 并集选择器（重点）

• 应用：
  • 如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
• 并集选择器是各个选择器通过 ’ ，’连接而成的
• 语法：

.class，h3 {
    color: red;
    font-size: 14px;
}

• 任何形式的选择器（包括标签选择器、类选择器、id选择器等），都可以作为并集选择器的一部分。
• 记忆技巧：
  • 并集选择器通常用于集体声明，逗号隔开，所有选择器都会执行后面的样式，逗号可以理解为 和 的意思。

 

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

测试题

 

<!--主导航栏-->
  <div class="nav">
    <ul>
      <li><a href="#">公司首页</a></li>
      <li><a href="#">公司简介</a></li>
      <li><a href="#">公司产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
<!--侧导航栏-->
  <div class="sitenav">
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-r"><a href="#">登录</a></div>
  </div>

在不修改以上结构代码的前提下，完成以下任务：

1. 链接 登录 的颜色为红色
2. 主导航栏里面的所有链接改为橙色

主导航栏和侧导航栏里面的文字都是14px且为微软雅黑

<style>
    .site-r a {
      color: red;
    }

    .nav ul li a {
      color: orange;
    }

    .nav, .sitenav {
      font-size: 14px;
      font-family: "Microsoft Yahei";
    }
</style>

1.5 链接伪类选择器（重点）

伪类选择器：

为了和我们刚才学的类选择器相区别

类选择器是一个点 比如 .demo { }

而我们的伪类选择器 用两个点 就是冒号 比如 :link{ }

作用：

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

因为伪类选择器很多，比如 链接伪类、结构伪类等等。我们这里先给大家讲解链接伪类选择器。

• a:link 未访问的连接 正常状态
• a:visited 已访问的链接 我们点击过的
• a:hover 鼠标经过链接时候的状态
• a:active 鼠标点击链接时候的状态

注意

• 写的时候，他们的顺序尽量不要颠倒，按照 lvha 的顺序，否则可能引起错误。
• 记忆法
  • LV包包 hao
• 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

a:link { /*未访问的连接 正常状态*/
  color: #333;
  text-decoration: none;
}

a:visited { /*已访问的链接 我们点击过的*/
  color: orange;
}

a:hover { /*鼠标经过链接时候的状态*/
  color: red;
}

a:active { /*鼠标点击链接时候的状态*/
  color: purple;
}

• 实际开发工作中，我们很少写全四个状态，一般写法如下：

a { /*a是标签选择器  所有的链接*/
  font-weight: 700;
  font-size: 16px;
  color: gray;
}

a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*鼠标经过的时候，链接字体颜色由原来的灰色 变成了红色*/
}

1.6 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	.nav a{}
子代选择器	选择最近一级元素	只选择亲儿子	较少	.nav>a{}
交集选择器	选择两个标签交集的部分	既是 又是	较少	p.demo{}
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	.nav,.demo{}
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover{}

2. 标签显示模式display（重点）

目标：

• 理解
  • 标签的三种显示模式
  • 三种显示模式的特点以及区别
  • 理解三种显示模式的相互转化
• 应用
  • 实现三种显示模式的相互转化

2.1 什么是标签显示模式

• 什么是标签的显示模式？
  • 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个
• 作用：
  • 网页的标签非常多，在不同地方会用到不同类型的标签，以便更好地完成我们的页面
• 标签的类型（分类）
  • HTML标签一般分为块标签和行内标签两种类型，它们也称为块级元素和行内元素。

2.2 块级元素 block

• 块级元素的特点

1. 块级元素独占一行
2. 宽度、高度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级元素宽度）的100%
4. 是一个容器及盒子，里面可以放行内元素或者是块级元素

• 注意：
  • 只有文字才能组成段落，因此 p 标签里面不能放块级元素，特别是p不能放div
  • 同理，还有h1~h6，dt，它们都是文字类块级元素，里面不能放其他块级元素
• 例如：

常见的块级元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等， 其中div标签是最典型的块级元素

 

2.3 行内元素 inline

• 块级元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个。
2. 宽高直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或者其他行内元素

• 注意：
  • 链接里面不能再放链接
  • 特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中span标签是最典型的行内元素，有的地方也称为 内联元素

2.4 行内块元素 inline-block

• 行内块元素的特点：

1. 和相邻的行内块元素在一行上，但是之间会有空白缝隙，一行可以显示多个
2. 默认宽度就是它本身内容的宽度
3. 高度、行高、外边距以及内边距都可以控制

 

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

2.5 三种模式区别

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	父容器的100%	容器级，可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

 

2.6 标签显示模式转换 display

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

此阶段，我们只需要关心这三个，其他的是我们后面的工作。

<div class="nav">
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

<style>
  .nav li {
    display: inline-block;
  }
  .nav li a {
    width: 80px;
    height: 40px;
    display: inline-block;
    background-color: pink;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
  }
  .nav li a:hover {
    background-color: orange;
  }
</style>

3. 行高那些事儿 line-height

目标

• 理解
  • 能说出 行高 和 高度 三种关系
  • 能简单理解 为什么行高等于高度 单行文字会垂直居中
• 应用
  • 使用行高实现单行文字垂直居中
  • 能会测量行高

3.1 行高测量

行高测量的方法：

 

英文的话，测量 基线和基线之间的距离

中文的话，测量 底线和底线之间的距离

 

3.2 单行文本垂直居中

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度。

行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

 

行高和高度的三种关系

• 如果 行高 等于 高度 文字会垂直居中
• 如果 行高 大于 高度 文字会偏下
• 如果 行高 小于 高度 文字会偏上

 

4. CSS背景 background

目标

• 理解
  • 背景的作用
  • css背景图片和插入图片的区别
• 应用
  • 通过css背景属性，给页面元素添加背景样式
  • 能设置不同的背景图片位置

4.1 背景颜色 background-color

• 语法：

background-color: 颜色值; 默认的值是 transparent 透明的

 

4.2 背景图片 background-image

• 语法：

语法：
background-image: none| url(图片路径)

我们提倡 背景图片后面的地址，url 不要加引号
eg：
    background-image: url(images/demo.png)

 

参数	作用
none	无背景图片（默认的）
url	使用绝对路径或相对路径设置背景图片

 

注意：

1. 必须加url
2. url 里面的地址不要加引号

4.3 背景平铺 background-repeat

• 语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

 

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

 

4.4 背景位置 background-position (重点)

• 语法：

 

background-position: length || length
background-position: position || position

 

background-attachment: scroll | fixed

参数	值
length	百分数 | 由浮点数字和单位标识符组成的长度值
position	top | center | bottom | left | center | right 方位名词

注意：

• 必须先指定 background-image 属性
• position 后面是x坐标和y坐标，可以使用方位名词或精确单位
• 如果只指定了一个方位名词，另一个值默认居中，为50%
• 如果只指定一个数值，那该数值只用于x坐标，另一个默认是y坐标，默认居中
• 如果指定两个数值，留两个值都是方位名词，则两个值前后顺序无关，比如 left,top和 top,left效果一致
• 如果指定两个值，精确单位和方位名称混合使用，则第一个值是x坐标，第二个值是y坐标

 

实际工作中，使用最多的，就是背景图片居中对齐

 

body {
    background-image: url(images/sms.jpg);
    background-repeat: no-repeat;
    /*这种写法一般是我们以后遇到 超大背景图片的做法 背景定位*/
    background-position: center top;
}

 

4.5 背景附着 background-attachment

• 背景附着就是解释背景是滚动还是固定的

语法：

background-attachment: scroll | fixed

 

参数	作用
scroll	背景图像是随对象内容滚动(默认)
fixed	背景图像固定

 

 

4.6 背景简写 background

• background: 属性值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下书写：
• background: 颜色背景 背景图片地址 背景平铺 背景滚动 背景位置;
• 语法：

 

background: transparent url(image.png) repeat-y scroll center top;

 

4.7 背景透明（CSS3）

语法：

background: rgba(0, 0, 0, 0.3);

 

• 最后一个参数是alpha透明度，取值范围0~1之间
• 我们习惯把 0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, 3);
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• 因为是CSS3，所以 低于 IE9 的版本是不支持的

4.8 背景总结

 

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标，切记 如果有精确数值单位，则必须按照先x后y的写法
background-attachment	背景是固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0, 0, 0, 0.3);后面必须是4个值

5. CSS 三大特性

目标：

• 理解
  • 能说出CSS央视冲突采取的原则
  • 能说出哪些常见的样式会有继承
• 应用
  • 能写出CSS优先级的算法
  • 能会计算常见选择器的叠加值

5.1 CSS 层叠性

 

 

 

 

• 概念：
  • 所谓层叠性 是指 多种CSS样式的叠加。
  • 是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候，一个属性就会将另一个属性层叠掉
• 原则：
  • 样式冲突，遵循的原则是 “就近原则”。哪个样式离着结构近，就执行哪个样式。
  • 样式不冲突，不会重叠

 

5.2 CSS继承性

 

• 概念：
  • 子标签会继承父标签的某些样式，如文本颜色和字号
  • 想要设置一个可继承的属性，只需将它应用于父元素即可。
  • 简单的理解就是： 子承父业
• 注意：
  • 恰当的使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级制定一个，这些孩子继承过来就好了。
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

 

5.3 CSS优先级（重点）

 

 

• 概念：

定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，此时，

• • 选择器相同，执行层叠性
  • 选择器不同，就会出现优先级的问题

1. 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者*	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个id	0,1,0,0
每个行内样式 style=“”	1,0,0,0
每个！important	∞无穷大

• specificity用一个四位的数，更像四个级别
• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
• !important在样式属性的后面添加 权重最高！
• 关于CSS权重，我们需要一套计算公式去计算，这个就是CSS Specificity(特殊性)

 

2. 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，此时，就会出现权重叠加。

就是一个简单的加法计算

• div ul li ——> 0，0，0，3
• .nav ul li ——> 0，0，1，2
• a:hover ——> 0，0，1，1
• .nav a ——> 0，0，1，1

注意：

1. 数位之间没有进制，比如说： 0，0，0，5 + 0，0，0，5 = 0，0，0，10 而不是 0，0，1，0 所以不会存在10个div能赶上一个类选择器的情况。
2. 继承的权重是0
3. 如果权重相同，则会根据层叠性，就近原则
4. 两个特殊标签 链接 和 H 标题，浏览器有自己默认的样式，继承的权重为0，所以，我们还是需要单独给链接和标题设置样式

 

3. 继承的权重是0

这个不难，但是容易忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1. 先看有没有选中，如果选中了，那么就用上面的公式来计算权重，谁大听谁的。
2. 如果没有选中，那么权重是0，因为继承的权重为0

 

<div class="demo" id="test">
  <p>继承的权重是0</p>
</div>

<style>
  div {
    color: pink;
  }
  
  p {
    color: blue;
  }
  .demo {
    color: red;
  }
  #test {
    color: yellow;
  }
</style>
/*因为 .demo,#test没有选中p标签，继承的权重为0，所以最后显示的是蓝色*/

 

注意：

两个特殊标签 链接 和 H 标题，浏览器有自己默认的样式，继承的权重为0，所以，我们还是需要单独给链接和标题设置样式

 

练习题

 

<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      <p>文字</p>
    </div>
  </div>
</div>

.c1 .c2 div {
  color: blue;                        /*0 0 2 1*/
}

 div #box3 {
   color: green;                      /*0 1 0 1*/
 }

 #box1 div {
   color: yellow;                     /*0 1 0 1*/
 }
 
/* 最后显示黄色  如果权重相同，遵循就近原则*/

 

<div id="father" class="c1">
  <p id="son" class="c2">
    文字颜色？
  </p>
</div>

#father #son {                         /*0 2 0 0*/
  color: blue;
}

#father p.c2 {                        /*0 1 1 1*/
  color: black;
}

div.c1 p.c2 {                         /*0 0 2 2*/
  color: red;
}

#father {
  color: green !important;            /*没选中 继承来的权重为 0 pass*/
}

/*最后显示蓝色*/