HTML/CSS

一、px,em,rem,vw,vh,vmin,vmax

px（像素）
        px是相对长度单位，它是相对于显示器屏幕分辨率的一个点的大小。
        px单位是固定的，不会随着父元素的改变而改变。
        px单位在响应式设计中使用较少，因为不会随着用户的浏览器设置改变而改变。

em：
        em是相对长度单位，它是相对于父元素的字体大小来计算的。
        如果应用在字体大小上，1em等于父元素的字体大小。如果应用在其他属性上，1em等于当前元素的字体大小。
        em单位具有继承性，会继承父元素的字体大小，因此在响应式设计中可以使用em单位来实现相对大小。

 rem：
        rem是相对长度单位，它是相对于根元素（html元素）的字体大小来计算的。
        1rem等于根元素的字体大小。通常浏览器的默认字体大小是16px，所以1rem等于16px。
        rem单位不会受到父元素字体大小的影响，更适合用于响应式设计中，可以更方便地控制整个页面的布局。
        可以直接给html的节点设置font-size：62.5%；1rem=10px；（16px*62.5%=10px）

vw和vh：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。

vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。

二、单元格合并 

 判断合并行或列

 合并行(跨行) rowspan

 合并列(跨列) colspan

 rowspan / colspan 写在第一个要合并的单元格

 合并的行数 / 列数写在属性值 

 将多余单元格注释 

三、input 

1.单行输入框< input type=“text”/>

2.密码输入框< input type=" password"/>

3.单选按钮< input type=" radio"/>；name的属性值一致，实现单选

4.复选框< input type=" checkbox"/>

5.普通按钮< input type=" button"/>

6.提交按钮< nput type=" 'submit"/>

7.重置按钮< input type=" reset"/>

8.图像形式的提交按钮< input type=" image"/>；图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。

9.隐藏域< input type=" hidden"/>；隐藏域对于用户是不可见的，通常用于后台的程序

10.文件域< input type=“file”/>；当定义文件域时，页面中将出现一个“选择文件”按钮和提示信息文本，用户可以通过单击按钮然后直接选择文件的方式，将文件提交给后台服务器。

11.emai类型< input type=“email”/>

12.url类型 <input type “url”/>
Url类型的< input />标记是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器;如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。

13.tel类型< input type=“tel”/>
tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和 pattern属性配合使用。

14. search类型< input type=" search"/>

search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。

15. color类型< input type=" color"/>
color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是# RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击clor类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

16. number类型< input type=" number/>
number类型的 <input/标记用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内则会出现错误提示。

number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下。
●vale:指定输入框的初始值
●max:指定输入框可以接受的最大的输入值。
min:指定输入框可以接受的最小的输入值。
●sep:输入域合法的数字间隔，如果不设置，默认值是1。

17. range类型< input type=" range"/>
range类型的<inpu标记用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与 number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。如果想改变mnge的vale值，可以通过直接拖动滑动块或者单击滑动条来改变。

18.Date pickers类型< input type= date， month，week…"/>
Date picker类型是指时间日期类型。HML中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期、具体。
Date：选取日、月、年
Month：选取月、年
Week：选取周、年
Time：选取时间(小时和分钟)
Datetime：选取时间、日、月、年(UTC时间)
datetime-local：选取时间、日、月、年(本地时间)

1. < input type=“file”/>美化

1.1 方式一、使用::file-selector-button

<input type="file" id="default-btn">

HTML：
<input type="file" id="default-btn">

CSS：
#default-btn::file-selector-button{
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

这种方法，文件选择框右侧默认就显示“未选择文件”的文字。如果您想隐藏这些文字，可以设置选择框input元素的font-size：0，即：

#default-btn{
    font-size: 0;
}

1.2 方式二、使用label标签 

HTML：

<span>
    <label for="fileInput" class="input-button" title="选择您的头像图片进行上传">选择文件</label>
    <input id="fileInput" type="file" style="display: none;">
</span>
<span id="fileName"></span>

CSS：

.input-button {
    display: inline-block;
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

 1.3 方式三、使用相对定位+透明

HTML：

<span class="inputBtn">
    <span>选择文件</span>
    <input class="inputFile" type="file" id="myImg" name="myImg" title="选择您的头像图片进行上传">
    </span>
<span id="fileName"></span>

CSS：

.inputBtn {  
    position: relative;  
    display: inline-block;  
    padding: 6px 10px;  
    border: 1px solid #1E9FFF;  
    border-radius: 3px;  
    background-color: #1E9FFF;  
    cursor: pointer;  
    font-size: 12px;  
    color: #fff;  
}  
.inputBtn:hover{  
    border: 1px solid #3aa9fb;  
    background-color: #3aa9fb;  
}  
.inputFile {  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0;  
    filter: alpha(opacity=0);  
}  

2. input属性

    placeholder:提示信息/占位符

    autofocus:自动获取焦点

    autocomplete:on/off 自动填写 可以作用于 input 和 form

    （"new-password"

    新密码。创建新账户或更改密码时，应将其用于“输入新密码”或“确认新密码”字段，而不是 通常出现的“输入当前密码”字段。浏览器可以使用它来避免意外填写现有密码，并在创建安全密码时提供帮助）

    name:区分表单

    novalidate:关闭校验

    required:必填项

    pattern:正则表达式

    maxlength:最大长度

    minlength:最小长度

3. label和input

<!-- 内容与输入框绑定, for 和 id 属性值一致 -->

        <label for="account"> 账号：</label>

        <input id="account" type="text" value="默认值">

四、video和audio 

    <!-- video:行内块元素 
    三种常见格式：mp4、webm、ogv
    浏览器差异问题 ：
    火狐、谷歌、欧朋浏览器支持全部格式
    safari只支持mp4格式
    IE8及以下版本不支持video标签
    IE9及以上只支持mp4格式

    controls向用户展示视频控件
    loop循环播放
    muted静音播放
    width
    height
    autoplay自动播放
    poster视频封面(图片链接)
    注意：autoplay在谷歌浏览器无法自动播放
     -->
    <video src="XXX.mp4" controls></video>

    <!-- 这样写的好处是：可以兼容不同的浏览器支持的视频格式 -->
    <video controls>
        <source src="XXX.mp4">
        <source src="XXX.webm">
        <source src="XXX.ogv">
    </video>

    <!-- audio:行内元素
    三种常见格式：mp3、wav、ogg
    浏览器差异问题 ：
    mp3格式所有浏览器都支持
    ogg支持谷歌、欧朋、火狐

    controls向用户展示音频控件
    loop循环播放
    muted静音播放
    width
    height
    autoplay自动播放

    -->
    <audio src="XXX.mp3" controls></audio>

    <!-- 这样写的好处是：可以兼容不同的浏览器支持的视频格式 -->
    <audio controls>
        <source src="XXX.mp3">
        <source src="XXX.wav">
        <source src="XXX.ogg">
    </audio>

五、表格table布局的缺点 

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将整个表格CSS设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义，头部用header,底部用footer……

六、标签 

    <!-- 块状元素 -->
	<!-- h1-h6/p/div/ul/li/ol/dl/dd/dt/table/tr/caption/form等 -->
    <!--特点：
        1.可以设置宽高
        2.独占一行
        3.有默认的宽高 默认宽度为父级元素的宽度的100% 默认高度由内容撑起来
        4.可以设置任意方向的内外边距
        5.可以容纳其他元素（hn、p不可以容纳块级元素）
     -->
    <!-- 行内元素 -->
    <!-- <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等 -->
    <!-- 特点：
        1.不可以设置宽高（设置无效）
        2.可以和相邻的行内元素或行内块元素一行显示
        3.有默认的宽高，默认宽度和高度由内容撑起来
        4.可以设置左右方向的内外边距
        5.只能容纳行内，行内块元素，a标签可以容纳块级元素
     -->
    <!-- 行内块元素 -->
	<!-- <img />、<input />、<label>、<select>、<option>、<button> -->
    <!-- 特点：
        1.可以设置宽高
        2.可以和相邻的行内元素或行内块元素一行显示
        3.可以设置任意方向的内外边距
        4.有默认的宽高，为元素本身的宽高
        5.一般不容纳其他元素
    -->

    <!-- 标签的模式转换 -->
    <!-- 
        1.dispaly:inline; 设置为行内元素
        2.display:block; 设置为块状元素
        3.display:inline-block; 设置为行内块元素
     -->

七、css三大特性

1.层叠性

            如果优先级不同，优先级高的顺序生效

            同优先级的选择器，设置相同的属性，样式冲突，就近原则

            样式不冲突则无层叠

2.继承性

            可以被继承的属性：color、text-、font-、line-

3.优先级/权重

            通配符选择器/继承       0,0,0,0

            标签选择器/伪元素选择器 0,0,0,1

            类选择器/伪类选择器     0,0,1,0

            id选择器                0,1,0,0

            行内样式表              1,0,0,0

            !important              无穷大∞

           

权重特点

            1.可以叠加

            2.不可以进位

八、外边距塌陷和外边距合并 

1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的“较大”者。外边距塌陷

2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

外边距合并解决方法：

/* 1.给父元素加1px宽的边框 */
   border-top: 1px solid transparent;
/* 2.给父元素加1px的上内边距 */
   padding-top: 1px;
/* 3.给父元素添加属性overflow: hidden; */
   overflow: hidden;

九、浮动 

1.浮动元素特点

 1.浮动后的元素不占位置

 2.浮动的元素会漂浮在其他元素之上

 3.浮动后元素不会超出父元素的范围

 4.浮动后元素不会超出父元素的内边距和边框

 5.浮动后的元素会自动转换为行内块元素

 6.两个相邻的浮动元素可能会在同一行显示

2.清除浮动

2.1 最后一个浮动元素末尾加 clear: both;

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

 2.2 父级元素添加 overflow: hidden;

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

 2.3 在父元素中使用after伪元素清除浮动

符合闭合浮动的思想

.father::after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;

        .father::after：这是一个伪元素选择器，表示在.bigbox元素的后面插入内容。

        content: ".";：设置伪元素的内容为一个点（"."），这个点实际上是不可见的，只是用来触发布局的变化。

        display: block;：将伪元素设置为块级元素，使其具有块级特性。

        height: 0;：将伪元素的高度设置为0，这样它就不会占用任何空间。

        clear: both;：清除浮动，确保伪元素后面的元素不会受到浮动的影响。

        visibility: hidden;：将伪元素的可见性设置为隐藏，使其在页面上不可见。

2.4 使用before和after双伪元素清除浮动

        .bigbox::after,
        .bigbox::before {
            content: "";
            /* 触发BFC BFC可以清除浮动 */
            display: table;
        }

            BFC(Block Formatting Context)就是块级格式化上下文，是页面上一块独立的渲染区域，内部元素盒子都按照其特定的规则进行排列渲染，且区域内的布局与区域外的布局不相互影响。

            你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。

            如何生成BFC：

            ①根元素 html 直接生成 BFC

            ②overflow 值不为 visible的块元素

            ③position 值为 absolute 或 fixed

            ④float 值不为 none

            ⑤display 值为 inline-block、flow-root、table、table-row、table-row-group、table-header-group、table-footer-group、table-cell、table-caption 等

            用途：

            ①BFC中的盒子对齐 （特性：内部的盒子会在垂直方向上一个接着一个的放置。）

            ②外边距重叠（特性：bfc就是页面上的一个独立容器，容器里面的子元素不会影响外部元素）

            ③两列、三栏布局（特性：不被浮动元素覆盖）

            ④可以防止字体环绕

            ⑤清除浮动

十、定位

1. 静态定位

和标准流一样，不脱标，不可以使用边偏移量

2. 相对定位

1.相对与自身原来的位置进行定位

2.可以使用边偏移量

3.使用相对定位的元素不脱离标准流，原来的位置会占据地方

 3.绝对定位

1.如果父级元素没有定位则根据页面定位

2.绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父级元素进行定位。可以使用边偏移量

3.脱离标准流；注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱离文档流，完全不占位置。

4. 固定定位

1、固定定位相对于浏览器页面进行定位。

2、固定定位完全脱标，不占有位置，不随着滚动条滚动。

5. 粘性定位（sticky）

        粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位（此时设定的 top, right, bottom、left 阈值并不生效），之后为固定定位。粘性定位元素并未脱离文档流。

        粘性定位它基于用户的滚动位置来定位。

        粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 

十一、实现子元素水平/垂直居中

1.转换（Transform）属性

首先，将子元素的左边距和顶边距都设置为50%，这将把元素的左上角移动到父容器的中心位置。

接着，使用transform: translate(-50%, -50%);将元素向左上方移动其自身宽度和高度的一半，从而实现居中。

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2.负边距（Negative Margins）

前提是，子元素相对与父元素定位；子绝父相。

首先，将子元素的左边距和顶部边距设置为50%，使其左上角位于父容器的中心。

然后，通过设置负边距来“拉回”子元素自身一半的宽度和高度。例如，如果子元素的宽度是100px，那么设置margin-left: -50px;就能让元素在水平方向上居中。

这种方法需要提前知道子元素的尺寸，或者通过JavaScript动态获取并应用这些值。

left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

3. flex布局

display: flex;
justify-content: center;
align-items: center; 

 十二、一些技巧

1. input

input {
    border: none;
    /* outline(轮廓) */
    outline: none;
}

2. a

text-decoration: none;

3. li

list-style: none; 

4. textarea

resize: none; 

/* 禁止拖拽 */

 5. 行内对齐

vertical-align: baseline(基线对齐，默认) / top(顶线) / middle(中线对齐) / bottom(底线对齐)

6.相邻的两个行内块元素

一个设置外边距另一个也受影响，给添加上边距的元素添加 / 受到影响的元素添加 : vertical-align: top;

7. 图片默认白色空隙

1.float: left; / font-size: 0;(给父级元素添加) 可以去除图片底部和侧边的空白缝隙 

2.daiplay: block; 去除图片底部的空白缝隙

8. 溢出内容处理

overflow: hidden / auto(自适应是否产生滚动条) / scroll(不论是否溢出均有滚动条) / visible(默认值)

9. 背景图片模糊化

1.一般设置一个div作为遮罩层，背景颜色设置透明度

background-color: rgb(0,0,0,0.5);

2.filter: blur()

设置图片模糊

将内容设置绝对定位，实现“背景”图片模糊效果

十三、元素的显示与隐藏

1.display: none隐藏(不占位置) / block显示

2.visibility: hidden(占位置) / visible

3.opacity: 0(完全透明) - 1 透明度

十四、渐变

1.线性渐变（Linear gradient）

可以设置多个颜色节点

可以使用rgba设置渐变色的透明度

可以通过to+方位词设置渐变方向

2.径向渐变（radial-gradient）

background-image: radial-gradient(ellipse, red, yellow, green);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

十五、转换 （transform）

1. translate():根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。translateX(Y)

2. rotate():在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。transform-origin:改变旋转轴中心

3. scale():该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 scaleX / scaleY

4. skew():skewX(<angle>);表示只在X轴(水平方向)倾斜;skewY(<angle>);表示只在Y轴(垂直方向)倾斜

十六、过渡（transition）

 transition：简写属性，用于在一个属性中设置四个过渡属性

1. transition-property：规定应用过渡的 CSS 属性的名称

2. transition-duration：定义过渡效果花费的时间。默认是 0

3. transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。linear 匀速.

4,transition-delay：规定过渡效果何时开始。默认是 0

 十七、动画

@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

animation: name duration timing-function delay iteration-count direction fill-mode;

@keyframes dh {

            0% {
                background: lightcoral;
                width: 500px;
            }

            25% {
                background: lightgreen;
                width: 600px;
            }

            50% {
                background: lightsalmon;
                width: 700px;
            }

            100% {
                background: lightcoral;
                width: 800px;
            }
        }

动画播放状态 paused暂停 running播放

animation-play-state: paused/running;

十八、Flex布局 

1.主轴/交叉轴

1.flex布局主轴：flex-direction: row / row-reverse / column / column-reverse

2.flex-wrap: wrap/no-wrap/wrap-reverse;

简写属性 flex-flow。第一个指定的值为 flex-direction,第二个指定的值为 flex-wrap. 空格隔开

3.justify-content属性用来使元素在主轴方向上对齐方式.

 justify-content: flex-start(默认) / flex-end / center / space-around / space-between / space-evenly;

4. align-items 属性可以使元素在交叉轴方向(行内)对齐。aligh-items: stretch(填充满行高,项目未设置高度时) / flex-start / flex-end / center

5. 设置交叉轴上行和行的排列方式:

align-content: stretch(填充满行高,项目未设置高度时) / flex-start / flex-end / center / space-around / space-between / space-evenly

2.项目

1.order 设置项目在主轴上的排列顺序,默认为0

2.flex-grow 非负数

3.flex-shrink 非负数 默认为1

4.flex-basis

5.设置项目在行中交叉轴方向上的对齐方式 align-self

3. flex-grow和flex-shrink 

3.1flex-grow

        （1）∑flex-grow≥1,剩余空间*1; 项目应扩张的大小 = (该项目的flex-grow/∑flex-grow)*剩余空间大小

        （2） ∑flex-grow≤1,剩余空间*∑flex-grow; 项目应扩张的大小 = (该项目的flex-grow/∑flex-grow)*剩余空间大小

        flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。如果没有足够的空间，则会溢出。如果所有元素的 flex-grow 值都为 0，则它们将不会拉伸。

 3.2 flex-shrink

        （1）溢出尺寸 = 项目的尺寸之和 - 容器尺寸

        （2） 各项目应收缩的尺寸 = (溢出尺寸 * 该项目的尺寸 * 该项目flex-shrink) / ∑(各项目的尺寸 * 各项目的flex-shrink)

        flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度——给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大

 十九、精灵图

所谓精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。

优点：

1. 采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
2. 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
3. 使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。

二十、溢出文本隐藏 

1. 实现一行省略号

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

2. 实现多行省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: n;

overflow: hidden;

二十一、流式布局/栅格系统

        .col-1 {
            width: 8.33%;
        }

        .col-2 {
            width: 16.66%;
        }

        .col-3 {
            width: 25%;
        }

        .col-4 {
            width: 33.33%;
        }

        .col-5 {
            width: 41.66%;
        }

        .col-6 {
            width: 50%;
        }

        .col-7 {
            width: 58.33%;
        }

        .col-8 {
            width: 66.66%;
        }

        .col-9 {
            width: 75%;
        }

        .col-10 {
            width: 83.33%;
        }

        .col-11 {
            width: 91.66%;
        }

        .col-12 {
            width: 100%;
        }

 二十二、属性选择器

1. [属性名] 选择带该属性名的元素。

2. [属性名='value'] 选择带有该属性，且属性值为 value 的元素。

3. [属性名|='value'] 选择带有该属性的元素，属性值为“value”或是以“value-”为前缀的对象

4. [属性值^='value'] 选择带有该属性的元素，且属性值是以 value 开头的元素。

5. [属性值$=value] 选择带有该属性的元素，且属性值是以 value 结尾的元素。

6. [属性值*=value] 选择带有该属性的元素，且属性值至少包含一个 value 值的元素。

ps:选择器属性值的写法必须和元素的属性值中的写法完全一致，才能选择到对应元素

二十三、伪类选择器

1. :first-child 选中第一个元素为div的子元素

    :last-child 选中最后一个元素为div的子元素(倒着找)

2. :first-of-type 选择同类型中的第一个子元素

     :last-of-type() 选择同类型中的最后一个子元素(倒着找)

3. :nth-child() 选中第n个元素为div的子元素

    :nth-last-child() 选中倒数第n个元素为div的子元素

4. :nth-of-type 选择同类型中的第n个子元素

    :nth-last-of-type() 选择同类型中倒数的第n个子元素

 对于n的值：

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

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

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

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

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

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

二十三、颜色

1. 英文单词

2. 十六进制

3. rgb/rgba

4. hsl/hsla；色相 hsl:(hue色调:0/360 120 240,saturation饱和度:0%-100%,lightness亮度:0-100%)