与前端训练营的日子 --Week11

关注

发布于: 2021 年 01 月 13 日

最近太忙，又请假延期学习任务了😭要完成每周的学习任务，确实要花费不少时间，课程难度对于不同能力的人其实并不一样，像我这种没有前端开发经验的客户端开发来说，感觉挺难的，还没到实战部分，就感觉很吃力了😅，不管怎么样，还是要完成学业才行，都已经完成一半学业了🤣

CSS 总论

1. CSS 语法

从 CSS 2.1 版本的语法为起点，探索 CSS。

2. CSS @规则

@charset ： https://www.w3.org/TR/css-syntax-3/
@import ：https://www.w3.org/TR/css-cascade-4/
@media ：https://www.w3.org/TR/css3-conditional/
@page ： https://www.w3.org/TR/css-page-3/
@counter-style ：https://www.w3.org/TR/css-counter-styles-3
@key-frames ：https://www.w3.org/TR/css-animations-1/
@font-face ：https://www.w3.org/TR/css-fonts-3/
@supports ：https://www.w3.org/TR/css3-conditional/
@namespace ：https://www.w3.org/TR/css-namespaces-3/

3. CSS 规则

课程里，将 CSS 规则，大致拆分成选择器和 Key-Value 组成的声明列表，而CSS variables引入了新 Key 值，分成 Properties(属性)和 Variables(变量)

Selectorhttps://www.w3.org/TR/selectors-3/ https://www.w3.org/TR/selectors-4/
Key
Valuehttps://www.w3.org/TR/css-values-4/

CSS 选择器

1. 选择器语法

简单选择器
通用选择器(Universal selector)，*
类型选择器(Type selector)，例如div，选择的是元素的tagName属性
类选择器(Class selector)，例如.cls，如果元素有多个class，只要匹配一个就行了
ID 选择器(ID selector)，例如#id
属性选择器(Attribute selector)，例如[attribute=value]
伪类，例如:hover
伪元素，例如::before，一般以双冒号开头，但也可以用单冒号开头，推荐使用双冒号开头
复合选择器(Combined)
*或div必须写在最前面，伪类和伪元素一定要写在最后面
<简单选择器><简单选择器><简单选择器>，简单选择器挨着写就成了复合选择器。选中的元素必须同时匹配几个简单选择器
复杂选择器(Complex)
<复合选择器><space><复合选择器>，子孙选择器/后代选择器(Descendant combinator)
<复合选择器>">"<复合选择器>，父子选择器/直接子代选择器(Child combinator)
<复合选择器>"~"<复合选择器>，一般兄弟选择器(General sibling combinator)
<复合选择器>"+"<复合选择器>，紧邻兄弟选择器(Adjacent sibling combinator)
<复合选择器>"||"<复合选择器>，列选择器(Column combinator)，表示选择`table`中的某一列
选择器列表(Selector list)
<复杂选择器>","<复杂选择器>
表示两个选择器之间的或关系，任意匹配到其中一个即可

2. 选择器优先级

选择器权重从高到低排列
ID 选择器
类选择器，属性选择器，伪类
类型选择器，伪元素

3. 伪类

根据CSS选择器：伪元素是怎么回事儿？里讲的内容，伪类是很大的一类简单选择器，它是选择器能力的一种补充。日常使用中，尽量通过合理的 id 和 class 来表示元素，少用伪类。

伪类选择器大致分为四种
树结构关系伪类选择器，例如:empty、:nth-child、:nth-last-child
链接与行为伪类选择器，例如:link、:hover、:active
逻辑伪类选择器，例如:not
其它伪类选择器

4. 伪元素

根据CSS选择器：伪元素是怎么回事儿？的内容，兼容性达到可用的伪元素，有四种

::before
::after
::first-line
::first-letter

CSS 选择器--match 函数实现

<html maaa=a ><head>    <style>#container {    width:500px;    height:300px;    display:flex;    background-color:rgb(78, 78, 78);}#container #myid {    width:200px;    height:100px;    background-color:rgb(255,0,0);}#container .c1 {    flex:1;    background-color:rgb(0,255,0);}div #id.class {    flex: 1;    background-color:rgb(255, 0, 255);}    </style></head><body>    <div id="container">        <div id="myid"></div>        <div class="c1"></div>        <img id="id" class="class" />    </div></body><script>    // 只处理了descendant combinator    function match(selector, element) {                if (!selector || !element.attributes) {            return false;        }        selector = selector.toLowerCase(); // 处理一下可能出现大写        // 为了后面的逻辑处理，先默认true        let isMatched = true;        // 拆分选择器，先处理当前元素再找父节点所以做了reverse        // 并把不同节点的选择器拆分成简单选择器保存起来        let selectors = selector.split(" ").reverse();         let selectorSet = [];        for (let i = 0; i < selectors.length; i++) {            selectorSet.push(selectors[i].match(/(\w+)|(\.\w+)|(\#\w+)/g))        }        // 从当前元素往父元素匹配        for (let j = 0; j < selectorSet.length; j++) {            const selectorList = selectorSet[j];
            for (let k = 0; k < selectorList.length; k++) {                if (!matchBasicSelector(selectorList[k], element)) {                    isMatched = false;                    break;                }             }                        element = element.parentNode;        }        return isMatched;    }
    function matchBasicSelector(selector, element) {        if (selector.charAt(0) === "#") {            let attr = element.attributes.id;            if (attr && attr.value === selector.replace('#','')) {                return true;            }        } else if (selector.charAt(0) === ".") {            let attr = element.attributes.class;            if (attr && attr.value === selector.replace('.','')) {                return true;            }         } else {            // 元素的tagName通过debug分析是大写的，所以转换成小写进行比较            if (element.tagName.toLowerCase() === selector) {                return true;            }        }        return false;    }
    console.log(match("div #id.class", document.getElementById("id")));    console.log(match("div#container #id.class", document.getElementById("id")));    console.log(match("div#container #id.class1", document.getElementById("id")));    console.log(match("div#container #id.class1", document.getElementById("myid")));</script></html>