一、CSS常用选择器

深度选择器

<div class="box1">
  <div class="box2">
    <div class="box3" style="width:150px;"></div>
  </div>
</div>
<style>
.box1 >>> .box3{
  background: transparent;
  cursor:pointer;
}
</style>

:first-child 选择器（选择的是 : 前的标签 ）

<div class="div1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</div>
<style>
  .div1>li:first-child {
    background-color: yellow;
  }
</style>

:nth-child() 选择器

<div class="div1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</div>
<style>
  .div1>li:nth-child(2) {  // 获取第二个li标签
    background: #ff0000;
  }
  .div1> :nth-child(3) {  // 获取div下的第3个子元素
    background: pink;
  }
</style>

:not(X)否定选择器：匹配不符合参数选择器X描述的元素。

https://blog.csdn.net/weixin_47077674/article/details/120151381

<div class="div1">
  <p class="p1">p1</p>
  <p class="p2">p2</p>
  <p class="p3">p3</p>
  <p class="p3">p3</p>
</div>
<div class="div2">
  <p class="p1">p1</p>
  <p class="p2">p2</p>
  <p class="p3">p3</p>
  <p class="p3">p3</p>
</div>

<style>
  .div1>.p3 {
    color: pink;
    background-color: #000;
  }

  .div1:not(.p3) {
    color: red;
    background-color: #fff;
  }
</style>

:is() 和:where()选择器（where优先级是0，is根据里面的标签优先级决定）

<div class="div1">
  <p>p1</p>
</div>
<div class="div2">
  <p>p2</p>
</div>

<style>
  :is(.div1, .div2) p {  /* 等效于：.div1>p,.div2>p {color: red;} */
    color: red;
  }
</style>

二、常用样式

1、水平垂直居中（元素）

（1）flex水平垂直居中

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
 .parent {
   width: 600px;
   height: 100px;
   display: flex;
   flex-direction: row; /* 主轴为水平方向，起点在左端(默认) */
   /* flex-direction: column;  主轴为垂直方向，起点在上沿  */ 

   /* 主轴元素对齐方式 */
   justify-content: center;                /* 主轴居中 */   
   /* justify-content: space-between;      均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
   /* justify-content: space-around;       均匀排列每个元素，每个元素周围分配相同的空间 */
   /* justify-content: space-evenly;      均匀排列每个元素，每个元素之间的间隔相等 */
   /* justify-content: start;              从行首开始排列 */
   /* justify-content: end;                从行尾开始排列 */
   /*justify-content: flex-start;          从行首起始位置开始排列 */
   /*justify-content: flex-end;            从行尾位置开始排列 */
   /*justify-content: left;                一个挨一个在对齐容器得左边缘 */
   /*justify-content: right;               元素以容器右边缘为基准，一个挨着一个对齐, */

   /* 交叉轴（另一条轴）对齐方式 */
   align-items: center; /* 单行 */
   align-content: center; /* 多行：space-between，space-around等 */

   /* 主轴是否换行 */
   flex-wrap: nowrap; /* (默认值) 不换行压缩宽度 */
   /* flex-wrap: wrap;   换行 */

   background-color: black;
 }
 .left,
 .right {
   width: 100px;
   height: 50px;
   background-color: #fff;
 }
</style>

（2）定位+margin 水平垂直居中

<div class="div1">
  <div class="center"></div>
</div>
<style>
  .div1 {
    background-color: #eee;
    width: 200px;
    height: 200px;
    position: relative;
  }
  .div1 .center {
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

（3）定位+transform 水平垂直居中

<div class="div3">
  <span class="center">元素宽高未知</span>
</div>
<style>
 .div3 {
   background-color: #eee;
   width: 200px;
   height: 200px;
   position: relative;
   margin-top: 20px;
 }
 .div3 .center {
   color: #fff;
   background-color: rgb(34, 71, 139);
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
</style>

（4）相对定位、绝对定位、固定定位、粘性定位

<div>
  absolute(绝对定位):
    （1）先看父元素（absolute或者relative），依次往上找，最后看文档主体（body）即浏览器。
    （2）脱离文档流的，即直接在标准流中删除，所以元素原来的位置会被占用。
</div>
<div>
  relative(相对定位):
    （1）相对于自己的正常位置进行定位，参考点是标签定位之前的位置，不是相对于父节点、同级节点或浏览器。
    （2）不会脱离文档流。
</div>
<div>
  fixed(固定定位):
    （1）相对于浏览器窗口进行定位。
    （2）会脱离文档流。
</div>
<div>
  sticky(粘性定位):
    （1）relative+fixed。
    （2）常用于表单的保存行固定，表单滚动，底下的操作固定。
</div>

（5）浮动无宽度-水平居中

<div class="box">
  <p style="background-color: pink">我是浮动的</p>
  <p style="background-color: skyblue">我也是居中的</p>
</div>
<style>
.box {
  float: left;
  position: relative;
  left: 50%;
}
p {
  float: left;
  position: relative;
  right: 50%;
}
</style>

2、元素阴影效果

<div class="a4"></div>
<style>
.a4 {
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9); /* 四周阴影*/
  /* 常规：box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */ */
  /* box-shadow: 10px 10px 5px #888888; */
}
</style>

3、滚动和隐藏滚动条

<div class="a1">
 overflow属性实现横向纵向滚动条
</div>
<style>
  .a1 {
    width: 100px;
    height: 100px;
    background-color: #acffcb;
    overflow: scroll;  /* 滚动 */
    overflow: hidden;  /* 隐藏 */
    overflow-y: scroll;  /* y轴滚动 */
  }
  /* 隐藏overflow滚动条方法 */
  .a1::-webkit-scrollbar {
    display: none;
  }
</style>

4、图片和文字水平垂直居中

（1）图片和单行文字对齐（图片对齐）

<div class="div1">
  <img src="./ico-交地.png" alt="" class="ico1" />
  单行文本
</div>
<style>
 .div1 {
   display: flex; /* 水平 */
   align-items: center;
   justify-content: center;
   background-color: pink;
 }
 .ico1 {
   width: 40px;
   height: 40px;
   vertical-align: middle; /* 垂直对齐图像 */
 }
</style>

（2）图片和多行文字对齐（文本对齐）

<div class="div1">
  <img src="./ico-交地.png" alt="" class="ico1" />
  <div>
    <div>两行</div>
    <div>两行文字</div>
    <div>两行文字</div>
  </div>
</div>
<style>
 .div1 {
   display: flex; /* 水平 */
   align-items: center;
   justify-content: center;
   text-align: left; /* 文本的对齐方向：center,left,right */
   width: 200px;
   height: 200px;
   background: pink;
 }
 .ico1 {
   width: 40px;
   height: 40px;
   vertical-align: middle; /* 垂直 */
 }
</style>

5、文字超出隐藏

<div>设置文字超出溢出时显示省略号</div>
<style>
 div {
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: pink;
   /* 隐藏 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   /* 多行隐藏 */
   /* display: -webkit-box;
   -webkit-line-clamp: [2, 3, 4]; //填写数字代表第几行省略
   -webkit-box-orient: vertical;
   overflow: hidden; */
 }
</style>

6、布局：左固定右适应、左右固定中适应

（1）左固定右适应（水平）

<div class="flexbox">
  <div class="leftbox"></div>
  <div class="rightbox"></div>
</div>
<style>
 .flexbox {
   display: flex;
   height: 300px;
   width: 700px;
 }
 .leftbox {
   width: 200px;
   background-color: #ffcccc;
 }
 .rightbox {
   flex: 1;
   width: 100%;
   background-color: skyblue;
 }
</style>

（2）左固定右适应（水平）

<div class="wrap">
  <aside id="left"></aside>
  <section id="main"></section>
  <aside id="right"></aside>
</div>
<style>
 .wrap {
   margin: 0 auto;
   width: 80%;
   height: 500px;
   display: flex;
 }
 #left {
   background: #ccffff;
   flex: 0 0 200px;
 }
 #right {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #main {
   background: #ffcccc;
   flex: 1;
 }
</style>

（3）上下固定中适应（垂直）

<div class="wrap">
  <aside id="left"></aside>
  <section id="main">
    vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport
    width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport
    height）的百分之一。
  </section>
  <aside id="right"></aside>
</div>
<style>
 .wrap {
   margin: 0 auto;
   width: 80%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 #left {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #right {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #main {
   background: #ffcccc;
   flex: 1;
 }
</style>

7、布局：头固定+内容滚动

（1）头尾固定+中间滚动

<div class="box">
 <div class="title">标题</div>
 <div class="list">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>...</li>
     <li>3</li>
   </ul>
 </div>
 <div class="footer">底部</div>
</div>
<style>
.title,
.footer {
  width: 100px;
  height: 60px;
  text-align: center;
  background-color: skyblue;
}
.list {
  width: 130px;
  height: calc(100vh - 60px - 60px);
  background-color: blue;
  overflow-y: scroll;
}
.list::-webkit-scrollbar {
  display: none;
}
</style>

（2）头部固定+table表头固定+table表格滚动

<div class="list">
  <div class="table-title">
    <table>
      <thead class="fixed-thead">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="scroll-table-content">
    <table>
      <tbody class="scroll-tbody">
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.list {
  height: 200px;
  width: 150px;
  background-color: pink;
  display: flex;
  flex-direction: column;
}

.scroll-table-content {
  background-color: green;
  flex: 1;
  overflow-y: scroll;
}

.scroll-table-content::-webkit-scrollbar {
  display: none;
}
</style>

8、网格布局（display: grid;）

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    display: grid;
    /* 行与列的间隙，不带（上下左右）四个边 */
    grid-gap: 10px;
    /* 带上四边，可以设置padding = grid-gap */
    padding: 10px;

    /* 控制列数，100px代表每列的宽度 */
    /* grid-template-columns: 100px 100px 100px; */
    /* grid-template-columns: 1fr 1fr 1fr; */    /* fr是整个宽度的占比，类似于flex：1 */
    /* grid-template-columns: repeat(6, 100px); */   /* repeat()指定列和行的方法，第一个参数是列数或行数，第二个是宽度或高度 */
    /* grid-template-columns: repeat(3, 33%); */
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-columns: repeat(auto-fit, 100px); */   /* auto-fit：自适应数量 */
    /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 根据页面宽度自适应，宽度最小100px*/     /* minmax() 设置大于等于 min 且小于等于 max，最小是100px，最大是1fr */

    /* 控制行数，50px代表每行的高度 */
    /* grid-template-rows: 50px 50px; */
    /* grid-template-rows: repeat(2, 50px); */
    background-color: skyblue;
  }

  .item8 {
    /* grid-area：自定义网格的位置和大小 */
    /* grid-area：grid-row-start，grid-column-start，grid-row-end，grid-column-end */
    /* grid-area：行开始，列开始，几行结束，几列结束 */
    grid-area: 2 / 1 / span 2 / span 3;
  }

  .container div {
    text-align: center;
    line-height: 50px;
    border: 2px solid;
    background: #fff;
  }
</style>

9、文本对齐

（1）文字左右两端对齐

<div class="box1">测试文字</div>
<div class="box2">测试</div>

<style>
  .box1,
  .box2 {
    width: 200px;
    height: 50px;
  }
  .box1 {
    /* text-align: right/left/center/justify; */
    text-align: justify;
    background-color: skyblue;
  }
  .box2 {
    text-align: justify;
    background-color: pink;
  }
</style>

10、背景色

<div class="box1">透明背景色</div>
<div class="box2">背景色缩写</div>

<style>
  .box1 {
    background: transparent;
  }
  .box2 {
    /* background: 颜色，图片，重复，滚动，位置 */
    background:  #00ff00 url('smiley.gif') no-repeat fixed center;;
  }
</style>