CSS复合选择器

交集选择器

• 语法：选择器1选择器2选择器3...选择器n {}

举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}

注意：

1. 有标签名，标签名必须写在前面。

2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。

3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p 元素又是span 元素。

4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

• 语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}

后代选择器

• 语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

  xxxxxxxxxx
  /* 选中ul中的所有li */
  ul li {
  color: red;
  }
  /* 选中ul中所有li中的a */
  ul li a {
  color: orange;
  }
  /* 选中类名为subject元素中的所有li */
  .subject li {
  color: blue;
  }
  /* 选中类名为subject元素中的所有类名为front-end的li */
  .subject li.front-end {
  color: blue;
  }
  

  注意：

  1. 后代选择器，最终选择的是后代，不选中祖先。

  2. 儿子、孙子、重孙子，都算是后代。

  3. 结构一定要符合之前讲的HTML 嵌套要求，例如：不能p 中写h1 ~ h6 。

子代选择器

• 语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

  示例：

  xxxxxxxxxx
  /* div中的子代a元素 */
  div>a {
  color: red;
  }
  /* 类名为persons的元素中的子代a元素 */
  .persons>a{
  color: red;
  }
  

  注意：

  1. 子代选择器，最终选择的是子代，不是父级。

  2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

兄弟选择器

• 语法： 选择器1+选择器2 {} 。

  示例：

  xxxxxxxxxx
  /* 选中div后相邻的兄弟p元素 */
  div+p {
  color:red;
  }
  

属性选择器

• 语法：

  xxxxxxxxxx
  1. [属性名] 选中具有某个属性的元素。
  2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
  3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
  4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
  5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
  

   

伪类选择器

• 语法：

x
1. :first-child 所有兄弟元素中的第一个。
2. :last-child 所有兄弟元素中的最后一个。
3. :nth-child(n) 所有兄弟元素中的第 n 个。
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型兄弟元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
7. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
8. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。

关于n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~正无穷的整数 ：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. -n+3 ：选中的是前3 个。

伪元素选择器

• 语法：

xxxxxxxxxx
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

• 选择器的优先级

  xxxxxxxxxx
  !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
  

CSS文本属性

颜色 (color)

xxxxxxxxxx
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */

字体 (font)

示例：

• 编写规则：

1. 字体大小、字体族必须都写上。

2. 字体族必须是最后一位、字体大小必须是倒数第二位。

3. 各个属性间用空格隔开。

xxxxxxxxxx
 font: bold italic 100px "微软雅黑","华文宋体";

分别表示：

• 粗细font-weight

  1. lighter ：细

  2. normal ： 正常

  3. bold ：粗

• 风格font-style

  1. normal：正常（默认值）

  2. italic ：斜体（使用字体自带的斜体效果）

  3. oblique ：斜体（强制倾斜产生的斜体效果）、

• 大小font-size

• 字体族font-family

  1. 多个字体用逗号分割

文本修饰 (text-decoration)

可选值

1. none ： 无装饰线（常用）

2. underline ：下划线（常用）

文本缩进 (text-indent)

作用：控制文本首字母的缩进

举例：

div {
text-indent:40px;
}

文本对齐_水平 (text-align)

常用值：

1. left ：左对齐（默认值）

2. right ：右对齐

3. center ：居中对齐

行高 (line-height)

可选值：

1. normal ：由浏览器根据文字大小决定的一个默认值。

2. 像素(px)。

3. 数字：参考自身font-size 的倍数（很常用）。

4. 百分比：参考自身font-size 的百分比。

vertical-align

作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。

常用值：

1. baseline （默认值）：使元素的基线与父元素的基线对齐。

2. top ：使元素的顶部与其所在行的顶部对齐。

3. middle ：使元素的中部与父元素的基线加上父元素字母x 的一半对齐。

4. bottom ：使元素的底部与其所在行的底部对齐。

特别注意： vertical-align 不能控制块元素。

CSS列表属性

list-style-type

常用值如下： none ：不显示前面的标识（很常用！）

CSS表格属性

边框

示例：

     border:3px red solid;

没有数量、顺序的要求，分别表示：border-width、border-color、border-style

border-style可选值

1. none 默认值

2. solid 实线

3. dashed 虚线

4. dotted 点线

5. double 双实线

CSS背景属性

示例：

x
  background: url(../images/悟空.jpg) no-repeat 100px 200px;
或者
  background: url(../images/悟空.jpg) no-repeat bottom center;

没有数量和顺序要求，分别表示：background-color，background-image，background-repeat，background-position

注意：

1. 有内边距，设置的背景颜色会填充内边距区域

2. 有边框，设置的背景颜色会填充边框区域

CSS鼠标属性

cursor

可选值：

1. pointer ：小手

2. move ：移动图标

3. text ：文字选择器

4. crosshair ：十字架

5. wait ：等待

6. help ：帮助

CSS盒子模型

CSS 长度单位

1. px ：像素。

2. em ：相对元素font-size 的倍数。

3. rem ：相对根字体大小，html标签就是根。

4. % ：相对父元素计算。

注意： CSS 中设置长度，必须加单位，否则样式无效！

• 快元素没设置宽度，宽度会充满整个父元素，没设置高度，高度由内容撑开

元素的显示模式

块元素（block）

又称：块级元素

特点：

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

2. 默认宽度：撑满父元素。

3. 默认高度：由内容撑开。

4. 可以通过css设置宽高。

行内元素（inline）

又称：内联元素 特点:

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 无法通过css 设置宽高。

行内块元素（inline-block）

又称：内联块元素

特点：

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2. 默认宽度：由内容撑开。

3. 默认高度：由内容撑开。

4. 可以通过css 设置宽高。

盒子模型的组成：

xxxxxxxxxx
盒子的大小 = content + 左右 padding + 左右 border

关于默认宽度

所谓的默认宽度，就是不设置width 属性时，元素所呈现出来的宽度。

xxxxxxxxxx
总宽度 = 父的content — 自身的左右margin 。

内容区的宽度 = 父的content — 自身的左右margin — 自身的左右border — 自身的左右padding 

注意： max-width 、min-width 一般不与 width 一起使用。 max-height 、min-height 一般不与 height 一起使用。

盒子内边距（padding）

padding 复合属性的使用规则：

1. padding: 10px; 四个方向内边距都是 10px 。

2. padding: 10px 20px; 上10px ，左右20px 。（上下、左右）

3. padding: 10px 20px 30px; 上10px ，左右20px ，下30px 。（上、左右、下）

4. padding: 10px 20px 30px 40px; 上10px ，右20px ，下30px ，左40px 。（上、右、下、左）

注意点：

1. padding 的值不能为负数。

2. 行内元素 的 左右内边距是没问题的，上下内边距不能完美的设置。

3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

盒子外边距 (margin)

注意点：

1. 子元素的margin ，是参考父元素的content 计算的。（因为是父亲的content 中承装着子元素）

2. 上margin 、左margin ：影响自己的位置；下margin 、右margin ：影响后面兄弟元素的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的margin ；但行内元素，左右margin 可以完美设置，上下margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右margin 都为 auto ，该块级元素会在父元素中水平居中。

5. margin 的值可以是负值。

margin 塌陷问题

什么是 margin 塌陷？ 第一个子元素的上margin 会作用在父元素上，最后一个子元素的下margin 会作用在父元素上。

如何解决 margin 塌陷？

1. 方案一： 给父元素设置不为 0 的padding 。

2. 方案二： 给父元素设置宽度不为 0 的border 。

3. 方案三：给父元素设置 css 样式 overflow:hidden

margin 合并问题

什么是 margin 合并？ 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？ 无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出 (overflow)

可选值：

1. visible ：显示，默认值

2. hidden ：隐藏

3. scroll ：显示滚动条，不论内容是否溢出

4. auto ：自动显示滚动条，内容不溢出不显示

隐藏元素的方式

visibility 属性

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏，元素虽然看不见了，但还占有原来的位置（元素的大小依然保持）。

display 属性

display:none ，就可以让元素隐藏，彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式的继承

会继承的 css 属性

xxxxxxxxxx
字体属性、文本属性（除了vertical-align）、文字颜色 等。

不会继承的 css 属性

xxxxxxxxxx
边框、背景、内边距、外边距、宽高、溢出方式 等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。 即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。 例如： text-align 、line-height 、text-indent 等。

2. 如何让子元素，在父亲中 水平居中： 若子元素为块元素，给父元素加上： margin:0 auto; 。 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

3. 如何让子元素，在父亲中 垂直居中：

   若子元素为块元素，给子元素加上： margin-top ，值为：(父元素content －子元素盒子总高) / 2。 若子元素为行内元素、行内块元素： 让父元素的height = line-height ，每个子元素都加上： verticalalign:middle; 。 补充：若想绝对垂直居中，父元素font-size 设置为0 。

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一： 去掉换行和空格（不推荐）。

2. 方案二： 给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。解决方案：

1. 方案一： 给行行内块设置vertical ，值不为 baseline 即可，设置为 middel 、bottom 、top 均可。

2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。

3. 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置font-size。

浮动

元素浮动后的特点

1. 🤢脱离文档流。

2. 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。

3. 😊不会独占一行，可以与其他元素共用一行。

4. 😊不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。

5. 😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决浮动产生的影响（清除浮动）

1. 方案一： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。

2. 方案二： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。

3. 方案三： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

   xxxxxxxxxx
   .parent::after {
       content: "";
       display: block;
       clear:both;
   }
   

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

相对定位 (relative)

相对定位的参考点在哪里？

相对自己原来的位置

相对定位的特点：

1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：

1. 定位的元素会盖在普通元素之上。

2. 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3. left 不能和right 一起设置， top 和bottom 不能一起设置。

4. 相对定位的元素，也能继续浮动，但不推荐这样做。

5. 相对行为的元素，也能通过margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

绝对定位 (absolute)

a、绝对定位的参考点在哪里？

参考它的包含块。

b、什么是包含块？

1. 对于没有脱离文档流的元素：包含块就是父元素；

2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

c、绝对定位元素的特点：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。

   2. left 不能和right 一起设置， top 和bottom 不能一起设置。

   3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。

   4. 绝对定位的元素，也能通过margin 调整位置，但不推荐这样做。

   5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素，固定定位也是一样会变成定位元素。

      xxxxxxxxxx
      何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。
      

粘性定位 (sticky)

a、粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

b、粘性定位元素的特点

1. 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。

2. 最常用的值是top 值。

3. 粘性定位和浮动可以同时设置，但不推荐这样做。

4. 粘性定位的元素，也能通过margin 调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

固定定位 (fixed)

a、固定定位的参考点在哪里？

参考它的视口，什么是视口？—— 对于PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

b、固定定位元素的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。

2. left 不能和right 一起设置， top 和bottom 不能一起设置。

3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。

4. 固定定位的元素，也能通过margin 调整位置，但不推荐这样做。

5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

   定位层级

   1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

   2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。

   3. 可以通过 css 属性 z-index 调整元素的显示层级。

   4. z-index 的属性值是数字，没有单位，值越大显示层级越高。

   5. 只有定位的元素设置 z-index 才有效。

   6. 如果z-index 值大的元素，依然没有覆盖掉z-index 值小的元素，那么请检查其包含块的层级。

定位的特殊应用

注意：

1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。

2. 发生相对定位后，元素依然是之前的显示模式。

3. 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

xxxxxxxxxx
1. 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为0 。

2. 高度想与包含块一致， top 和 bottom 设置为 0 。

盒子阴影

xxxxxxxxxx
写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 
box-shadow: 10px 10px 20px 3px blue inset;

位移

特点：

1. 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。

3. 位移对行内元素无效。

4. 位移配合定位，可实现元素水平垂直居中，父元素需要绝对定位

   x
   .box {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
   }
   

    

居中设置

普通设置水平垂直居中

如何让子元素，在父亲中 水平居中：

xxxxxxxxxx
若子元素为块元素，给父元素加上： margin:0 auto; 

若为行业块或者行内元素，给子元素加上：text-align:center

如何让子元素，在父亲中 垂直居中：

xxxxxxxxxx
若子元素为块元素，给子元素加上： margin-top ，值为：(父元素content －子元素盒子总高[content+border+padding]) / 2。

若为行业块或者行内元素，让父元素的height = line-height ，每个子元素都加上： verticalalign:middle; 。

补充：若想绝对垂直居中，父元素font-size 设置为0 。

让定位元素在包含块中水平垂直居中

父元素开启相对定位，自身开始绝对定位，子元素必须设置宽高，不然会撑满父元素

方案一：

xxxxxxxxxx
 .outer {
            width: 800px;
            height: 400px;
            position: relative;
        }
        .inner {
            width: 400px;
            height: 100px;
            position: absolute;
            /* 方案一 */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

            /* 方案二 */
        /* left: 50%;
            top: 50%;
            margin-left: -200px; 负的宽度一半;
            margin-top: -50px;  负的高度一半; */
        }

flex 实现水平垂直居中

x
.outer {
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
方法一：父容器开启flex 布局，随后使用justify-content 和align-items 实现水平垂直居中，子元素必须设置宽高。

.inner {
    width: 100px;
    height: 100px;
background-color: orange;
}
方法二：父容器开启flex 布局，随后子元素margin: auto，子元素必须设置宽高。

.outer {
    width: 400px;
    height: 400px;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    margin: auto;
}

位移配合定位，可实现元素水平垂直居

x
位移配合定位，可实现元素水平垂直居中，父元素需要绝对定位，子元素必须设置宽高。

.outer {
    width: 400px;
    height: 400px;
    display: flex;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}