【css_2】复合选择器/显示模式/行高/背景/三大特性

一、复合选择器

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

(重点1、4、5)

1、后代选择器

1.1 选择nav类下的所有a标签：

.nav a {}

.nav ul li a {}

1.2 后代选择器，选择子孙重孙...所有后代

2. 子代选择器（子元素选择器）：只选择到div下的第一代strong元素

div > strong

3.交集选择器

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

即是p/div标签，又是nav类选择器: p.nav /div.nav

4.并集选择器

集体声明，简写：p,sapn, .red {}

5.链接伪类选择器*

a:link 未访问过的链接状态

a:visited 已访问过的链接状态

a:hover 鼠标悬浮在链接上的状态

a:active 鼠标点住链接不放手的状态

注：

① 四种状态顺序不要颠倒"lvha"

② p.one为交集选择器，a:link也属于交集选择器（a为链接标签，:link为伪类）

③ 实际工作中不会四个都写全，常用写法如下：

二、标签显示模式*

三种显示模式

1、块级元素（block-level）

1.1 常用块级元素：

至

、

、

、

、
、
1. 等，其中
   是最典型的块元素

   1.2 块级元素特点：

   ① 独占一行

   ② 高度、宽度、外边距、内边距都可以控制

   ③ 宽度默认是容器（父级宽度）的100%

   ④ 是一个容器及盒子，里面可以放行内或块级元素

   注意：文字类块级元素如p、h1、dt等，内部不能放其他块级元素

   

   2、行内元素(inline)

   2.1 常见行内元素：a、strong、b、em、i、del、s、ins、u、span等，其中span是最典型的行内元素，有时也称内联元素

   2.2 行内元素特点：

   ① 一行内可显示多个

   ② 宽高设置无效，宽度高度即为本身内容宽高

   ③ 行内元素只能容纳文本或其他行内元素

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

   

   

   3. 行内块元素（inline-block）

   3.1 常见特殊标签：img、input、td，可以对他们设置宽高和对齐属性

   3.2 行内块元素特点：

   ① 和相邻行内元素（行内块）在一行上但是中间会有空白缝隙，一行可以显示多个

   ② 默认宽高就是本身内容的宽高

   ③ 高度、行高、外边距、内边距都可以控制

   

   

   

   显示模式的相互转化

   1、块转行内：display:inline;

   

   

   2、行内转块：display:block;

   

   

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

   

   

   练习：

   

   

   三、行高

   应用于使单行文本在盒子中垂直居中对齐

   行高的测量：英文文本基线到基线的距离，中文可以测试文字底边到底边的距离

   https://blog.csdn.net/a2013126370/article/details/82786681

   

    

   

   行高和高度的关系：

   ① 行高=高度 垂直居中

   ② 行高>高度 文字偏下

   ③ 行高<高度 文字偏上

   四、css背景（background）

   1. 背景颜色

   

   2. 背景图片

   

   background-image: url(images/006.jpg); 【url中不加引号】

   3. 背景平铺

   

   4. 背景位置*

   

   方位名词（两词无序）：

   右下角：

   水平垂直居中：

   靠左垂直居中：

   若只指定了一个方位名词，另一个默认居中对齐

   数值：（两数值代表x、y坐标值，有序）

   水平方向左起10px，垂直方向上起50px：

   

   可搭配方位词：

   一般超大背景图时用：

   5.背景附着

   

   6. 背景简写

   

   可简写为（无官方标准，中间空格隔开）：

   常规顺序：背景颜色（默认透明）  背景图片地址  背景平铺（默认平铺）  背景滚动（默认滚动）  背景位置

   

   7. 背景透明（低于ie9不支持）

   

   指的是盒子的半透明，不影响里面的内容颜色

   @@@ sublime小技巧：按住鼠标滚轮，向下拖，可以同时选中一列，可同时输入几行相同的数据

   

   五、css三大特性

   1、层叠性：多种相同css样式的叠加，就近原则，下例div颜色显示为绿色

   

   

   若第一个div中加了font-size属性，则也会生效，只覆盖重复的属性

   

   

   2、继承性

   子标签会继承父标签的属性，可以恰当的简化代码降低css样式复杂性

   不是所有父标签的属性都可以继承，可以继承的样式：text-、font-、line-这些元素开头的可以继承，以及color属性

   其余的不可以

   

   

   3、优先级

   3.1 概念

   选择器相同时遵循层叠性就近原则，选择器不同时便会产生优先级

   

   显示为绿色：

   3.2 权重计算公式

   通配符*与继承  0，0，0，0 < 标签 0，0，0，1 < 类选择器 0，0，1，0 < id选择器 0，1，0，0 < 行内样式 1，0，0，0

   特殊：！important 给某个标签样式加上此句后，权重最高

   

   显示为紫色：

   

   显示为红色：

   3.3 权重叠加

   

   再如：

   div ul li ----0003、.nav ul li----0012、a:hover---0011、.nav a----0011

   0，0，0，5 + 0，0，0，5=0，0，0，10 不进位

   两种样式都选中了某标签，看权重，权重大的生效 如：0，0，1，0要大于0，0，0，13

   

   显示为粉色：

   注意：继承的权重为0

   显示为绿色

   仍显示为绿色，

   因为没有选中p标签，.demo是加的父元素的权重，要看p标签有没有被选中才生效，p已经有自己的属性，父级元素权重再大没有选中p标签也不会生效。

   改成.demo p{}即可生效，显示为粉色

   练习题：