选择器进阶

选择器进阶

• 群组选择器

• • h1, h2, h3 {

background-color: yellow;

text-align: center;

}

• 选择器之间用逗号分隔

• 交集选择器

• • div.red {

background-color: yellow;

}

• 由两个以上单一选择器组成

• 子代选择器

• • ul li > a { /*子代选择器 子 指的是 亲儿子 大于号分割 此时的a 一定是 li 的亲 儿子 */

color: red;

}

• 后代选择器

• • ul li a {

color: red;

}

伪类链接选择器

• • a:link 正常，未访问过的链接

  • a:visited 访问过后

  • a:hover 鼠标悬停

  • a:active 鼠标点击那一刻

鼠标移入

• 鼠标移入：

    div:hover {
        width: 400px;
        height: 400px;
        background-color: blue;
        color: red;
        text-align: center;
        line-height: 400px;
      }

• 父子关系鼠标移入：

    .wrap {
        width: 400px;
        height: 400px;
        background-color: #ccc;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #099;
      }
      .wrap:hover .box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }

盒模型的概念

• 概念：css盒模型本质是一个盒子，封装周围的html标签，它包括：外边距，边框，填充（内边距）和实际内容

• 内容 content :

• • width: 设置宽度

  • height: 设置高度

• 内边距（填充区域）padding ：

• • 单边内边距：padding-top padding-bottom padding-left padding-right

  • 简写 :

• • • 一个值：表示四个方向的内边距值。

    • 两个值：分别表示上下，左右的内边距值

    • 三个值：分别表示上，左右，下的内边距值

    • 四个值：分别表示上，右，下，左的内边距值

• 边框 border :

• border-width 边框的宽度

• border-style 边框的样式

• • • none 定义无边框

    • dotted 定义点状边框

    • dashed 定义虚线边框

    • solid 定义实现边框

    • double 定义双线。双线的高度等于border-width的值

• border-color 边框的颜色

• 简写：border: 1px solid red;

• 外边距 margin : （可以设置负值）

• • 单边外边距 ： margin-top margin-bottom margin-left margin-right

  • 简写：

• • 一个值：表示四个方向的外边距值。

    两个值：分别表示上下，左右的外边距值

  三个值：分别表示上，左右，下的外边距值

  四个值：分别表示上，右，下，左的外边距值

外边距经典塌陷问题(2种)以及解决办法：

父子关系塌陷：

• 给父级设置边框或内边距

• 给父级设置溢出隐藏 overflow:hidden,实际上是触发BFC

兄弟关系塌陷：

• 给任何一个标签套一个父标签 加overflow:hidden。

最大宽度最小宽度和最大高度最小高度

• max-width和min-width:

• • 用来设置元素的最大宽度和最小宽度

• max-height和min-height:

• • 用来设置元素的最大高度和最小高度

实用小技巧:边框实现小三角

    div {
      width: 0px;
      /* width: 200px;
      height: 200px; */
      /* background-color: pink; */
      /* border:100px solid red */
      border-width: 10px ;
      border-style: solid;
      /* 透明色：transparent */
      border-color: transparent transparent transparent lightgreen;
    }