前端简单总结

一、nth-child()和nth-of-type()

css伪类选择器有nth-child()和nth-of-type()。前者先找括号内的位置，在匹配标签，后者先匹配标签，再在标签中寻找位置。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <style>
            /*先位置，后匹配：先找到第4个标签，再匹配选择器对象*/
            p:nth-child(4) {
                color: red;
            }
            a {
                color: inherit;
            }

            /*先匹配，后位置：先把所有p标签意外的标签屏蔽(只匹配p标签)，再匹配位置*/
            p:nth-of-type(2){
                color: orange;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="">a111</a>
            <p>p111</p>
            <a href="">a222</a>
            <p>p222</p>
        </div>
    </body>
</html>

二、html

html常用标签

html  head  body
div  span
br  hr  
a  img
i  b  u
h1~h6  p
ul  li
table  thead  tbody  tfoot  tr  th  td
form  input  label  textarea  select  option

三、css

css选择器

基础：*  div  .div  #div  !important
群组：div,h1,a {}
后代：body div    body > div
兄弟：.d1~d2     .d1+.d2
交叉选择器：.d1.d2  |  div.d1  div.d1#d.d2   <div class="d1 d2"  id="d"> 
属性选择器：[titile]
伪类选择器：:hover  :active  :focus  :blur  :change  :checked
		  :after{content:""}  :before{content:""}
		  :nth-child()  :nth-of-type()

四、js

js四种变量，js字符串、数组、对象的操作方法，js可变长参数:

function f() {
        let a = 1;  // 不可以重复声明
        var b = 2;  // 可以重复声明  var b = 4;
        const c = 3;  // 常量
        d = 4;  // 全局
    }
    f();
    console.log(d);


    {
        let a = 1;
        var b = 2;
    }
    console.log(b);

    ''.split();
    '' + '';
    ''.slice();
    ''.length;
    // for in | for of

    [].join();
    [].push();[].unshift();
    [].pop();[].shift();
    // [].splice(bIndex, length, args)
    [].sort();

    let g = {};
    g['key'];
    g.key;
    delete g.key;

    function f1(...a) {
        console.log(a)
    }
    f1(1, 2, 3, 4);