CSS3的新增内容

迈不过友情╰ 2023-05-28 06:58 60阅读 0赞

# 一、选择器 #

### a）、属性选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>属性选择器</th> 
   <th>说明</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E[attr]</td> 
   <td>查找存在 attr属性的E元素</td> 
   <td>div[class]</td> 
  </tr> 
  <tr> 
   <td>E[attr=val]</td> 
   <td>查找存在 attr属性且值完全为val的E元素</td> 
   <td>div[class=“mydemo”]</td> 
  </tr> 
  <tr> 
   <td>E[attr*=val]</td> 
   <td>查找存在 attr属性且值包含为val的E元素</td> 
   <td>div[class*=“mydemo”]</td> 
  </tr> 
  <tr> 
   <td>E[attr^=val]</td> 
   <td>查找存在 attr属性且值以val开头的E元素</td> 
   <td>div[class^=“mydemo”]</td> 
  </tr> 
  <tr> 
   <td>E[attr$=val]</td> 
   <td>查找存在 attr属性且值以val结尾的E元素</td> 
   <td>div[class$=“mydemo”]</td> 
  </tr> 
  <tr> 
   <td>E[attr~=val]</td> 
   <td>查找存在 attr属性且值为一个以空格作为分隔的值列表，其中至少有一个值为 val</td> 
   <td>div[class~=“mydemo”]</td> 
  </tr> 
  <tr> 
   <td>E[attr|=val]</td> 
   <td>查找存在 attr属性且值为“value”或是以“value-”为前缀</td> 
   <td>div[class|=“mydemo”]</td> 
  </tr> 
 </tbody> 
</table>

### b）、伪类选择器 ###

#### 1、相对于兄弟的伪类 ####

<table> 
 <thead> 
  <tr> 
   <th>伪类选择器</th> 
   <th>说明</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E1 + E2</td> 
   <td>来获取元素E1的下一个兄弟元素，且这个元素的标签必须为E2</td> 
   <td>div + p</td> 
  </tr> 
  <tr> 
   <td>E1 ~ E2</td> 
   <td>来获取元素E1的所以兄弟元素，且这些元素的标签必须为E2</td> 
   <td>div ~ p</td> 
  </tr> 
 </tbody> 
</table>

#### 2、相对于父亲的伪类 ####

<table> 
 <thead> 
  <tr> 
   <th>伪类选择器</th> 
   <th>说明</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E:last-child</td> 
   <td>查找E元素的父元素内最后一个子元素，且这个子元素必须为E</td> 
   <td>li:last-child</td> 
  </tr> 
  <tr> 
   <td>E:first-child</td> 
   <td>查找E元素的父元素内第一个子元素，且这个子元素必须为E</td> 
   <td>li:first-child</td> 
  </tr> 
  <tr> 
   <td>E:first-of-type</td> 
   <td>查找E元素的父元素内类型为E的第一个子元素</td> 
   <td>li:first-of-type</td> 
  </tr> 
  <tr> 
   <td>E:last-of-type</td> 
   <td>查找E元素的父元素内类型为E的最后一个子元素</td> 
   <td>li:last-of-type</td> 
  </tr> 
  <tr> 
   <td>E:nth-child（n|数字|表达式）</td> 
   <td>查找E元素的父元素内所有子元素|查找第几个子元素|查找符合表达式的子元素,从1开始</td> 
   <td>ul:nth-child(n)</td> 
  </tr> 
  <tr> 
   <td>E:nth-of-type（n|数字|表达式）</td> 
   <td>查找E元素的父元素内所有子元素|查找第几个子元素|查找符合表达式的子元素,从1开始</td> 
   <td>ul:nth-of-type(n)</td> 
  </tr> 
  <tr> 
   <td>E:nth-last-child（n）</td> 
   <td>同E:nth-child（n）相似，只是倒着计算</td> 
   <td>ul:nth-last-child(n)</td> 
  </tr> 
  <tr> 
   <td>E:nth-child（odd）</td> 
   <td>查找E元素的父元素内所有奇数子元素,从1开始</td> 
   <td>ul:nth-child(odd)</td> 
  </tr> 
  <tr> 
   <td>E:nth-child（even）</td> 
   <td>查找E元素的父元素内所有偶数子元素,从1开始</td> 
   <td>ul:nth-child(even)</td> 
  </tr> 
  <tr> 
   <td>E:empty</td> 
   <td>选中没有任何子节点的E元素，注意空格也是子元素</td> 
   <td>div:empty</td> 
  </tr> 
  <tr> 
   <td>E:target</td> 
   <td>结合锚点使用，当选中当前锚点的元素会被选择</td> 
   <td>div:target</td> 
  </tr> 
 </tbody> 
</table>

**重点说明**：表达式里面的n遵循线性变换，其取值为0，1，2，……（默认范围是0~子元素的个数），但是当n<=0时，取值无效。举例：-n+5（取1到5的元素）、2n（偶数）、2n+1（奇数）

### c）、伪元素 ###

<table> 
 <thead> 
  <tr> 
   <th>伪元素选择器</th> 
   <th>说明</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E::before</td> 
   <td>是一个行内元素，通过display：block可以设置尺寸;必须添加content，哪怕不设置内容；涵义是定义在一个元素的内容之间插入content属性定义的内容和样式</td> 
   <td>div::before</td> 
  </tr> 
  <tr> 
   <td>E::after</td> 
   <td>是一个行内元素，通过display：block可以设置尺寸;必须添加content，哪怕不设置内容；涵义是定义在一个元素的内容之后插入content属性定义的内容和样式</td> 
   <td>div::after</td> 
  </tr> 
  <tr> 
   <td>E::first-letter</td> 
   <td>查找文本的第一个字母或者汉字（不能是词组）</td> 
   <td>p::first-letter</td> 
  </tr> 
  <tr> 
   <td>E::first-line</td> 
   <td>查找文本的第一行</td> 
   <td>p::first-line</td> 
  </tr> 
  <tr> 
   <td>E::selection</td> 
   <td>查找选中的文本</td> 
   <td>p::selection</td> 
  </tr> 
 </tbody> 
</table>

**这里的E::selection只能设置显示的样式（颜色），不能设置内容的大小、尺寸（字号）**

# 二、box-shadow #

/* * 边框阴影：box-shadow：h v blur spreed color insert; * h：水平方向的偏移量 * v：垂直方向的偏移量 * blur：模糊--可选（可选，默认是0） * spreed：阴影尺寸的扩张与收缩（可选，默认是0） * color：颜色（可选，默认是黑色） * inset：内阴影（可选，默认是外阴影） */
    box-shadow: 0 0 3px 5px black inset;

# 三、颜色模式 #

### a）、RGBA ###

background-color: rgba(0,255,0,.5);

![在这里插入图片描述][20200329155749145.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

### b）、HSLA ###

background-color: hsla(360,20%,50%,.5);

![在这里插入图片描述][20200329160644351.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]  
那么**opacity**与**上面的两种的透明度**有上面**区别**呢？  
opacity会让子元素继承透明度，而rgba和hsla不会

# 四、文本阴影 #

### 单层阴影： ###

![在这里插入图片描述][20200329161944841.png]

### 多层阴影： ###

text-shadow: 0 0 10px black,0 0 30px red,0 0 50px yellow;

### 浮雕： ###

text-shadow: -1px -1px 0 #eee,-2px -2px 0 #ddd,-2px -2px 0 #ccc;

# 五、一些杂乱的内容 #

### 盒模型： ###

box-sizing: border-box;				//盒子的内容包括padding，border，content
    box-sizing: content-box;			//盒子内容包括content

### 边框圆角： ###

border-radius: 10px;
    border-radius: 50px/25px;
    border-top-left-radius: 5px;			//左上角
    border-top-right-radius: 10px;			//右上角
    border-bottom-right-radius: 20px;		//右下角
    border-bottom-left-radius: 10px;		//左下角

![在这里插入图片描述][20200329164422810.png]

### 线性渐变： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]

### 径向渐变： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]

### 背景： ###

background-repeat: round;           /*会对图片缩放在平铺*/
    background-repeat: space;           /*图片不会平铺，只是会在图片之间产生相同的间距*/
    background-attachment: fixed        /*在滚动的时候，背景图片的位置不变*/
    background-attachment: scroll       /*在滚动的时候，背景图片跟随容器滚动而滚动*/
    background-attachment: local       /*和scroll类似，区别是scroll滚动的是整个页面，local滚动的是某个容器*/
    background-size: 10px;                   /*背景图片大小*/
    background-size: contain;                /*按比例调整背景图片大小，如果图>容器就放大，反之缩小 ，可能会造成空白区域*/
    background-size: cover;                  /*按比例调整背景图片大小，如果图>容器就放大，反之缩小 ，不会造成空白区域*/

### 多列布局： ###

column-count: 设置列的具体个数
    column-width: 控制列宽（如果冲突，则保大）
    column-gap: 两列的间隙大小
    column-rule: 规定列的之间的宽度、样式，与边框添加样式相同
    column-span: 规定元素应跨多少列，取值n|all

### 伸缩盒子： ###

#### display和justify-content ####

/*设置父容器的伸缩盒子，当子元素的宽度和大于父容器宽度时，子元素就会压缩在同一行上，不会换行*/
    display: flex;
    /* * flex-start:让子元素浮动在父元素的左边 * flex-end:让子元素浮动在父元素的右边 * center:让子元素浮动在父元素的中间 * space-between:左右对齐父容器，中间平均分页，产生相同间距 * space-around:将多于的空间平均分在每一个子元素的两边，造成中间盒子的间距是两边盒子间距的两倍 */
    justify-content: space-between;

#### flex-flow ####

/*flex-flow是flex-wrap与flex-direction的组合*/
    /*flex-wrap:控制是否换行显示，默认不换行显示 nowrap：不换行 wrap：换行 wrap-reverse：翻转，原来是从上到下，翻转后就从下到上排列 flex-direction：设置子元素的排列方向，就是主轴方向，默认是row column-reverse:列为主轴，从下到上方向 column:列为主轴，从上到下方向 row-reverse:行为主轴，从右到左方向 row:行为主轴，从左到右方向 */
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    /*与flex-flow：row-reverse wrap-reverse相同*/

#### flex ####

![在这里插入图片描述][20200330165706299.png]

/*flex-grow:是用来扩展子元素的宽度：设置当前子元素应该占据剩余空间的比率值 比例值计算：当前元素的flex-grow比上所有兄弟的flex-grow值之和 flex-grow的默认是0*/
    flex-grow: 1;

/*flex-shrink：定义收缩比例，通过计算来收缩空间 计算方式与flex-grow类似，但他的默认值为1*/
    flex-shrink: 1;

**利用flex来控制box1与box2的宽度**

.container{ 
    width: 100%;
        height: 30rem;
        border: 1px black dashed;
        display: flex;
    }
    .box1{ 
        flex: 1;
        background-color: black;
    }
    .box2{ 
        flex: 3;
        background-color: red;
    }

#### align-items ####

/*align-items：子元素在侧轴方向的对齐方式 center：侧轴方向居中 flex-start：侧轴方向顶对齐 flex-end：侧轴方向底对齐 stretch：让子元素在侧轴方向拉伸，填满整个侧轴方向 baseline：文本基线 */
    align-items: flex-end;

#### align-self ####

/*设置单个元素在侧轴方向的对齐方式*/
    align-self: flex-end;

本文只用于个人学习和记录

[20200329155749145.png]: /images/20230528/a90de2296d984693844b24a8bc9c683c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/a47c0fa7dab5401a8abd4518ac678c88.png
[20200329160644351.png]: /images/20230528/38a36619e6f64ebf8d83dc422e0aef15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/7b77a1a301a945b18f495c8d50bdec70.png
[20200329161944841.png]: /images/20230528/b97b079102994a3680d242e60a6ebd5c.png
[20200329164422810.png]: /images/20230528/1ec1bb5a6026410282ba63099d42f678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230528/60eaedf031f44edb980abf97a2c6deab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20230528/35ce2c60e0044b2d85d5e3e96e4a8273.png
[20200330165706299.png]: /images/20230528/f512b7f3450a474d81d5ca2a892e19c1.png