1fy07h 发表于 2024-6-30 06:46:06

CSS 选取器及权重


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">关于css解析器</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 经过解析生成 DOM Tree（这个<span style="color: black;">咱们</span>比较熟悉）；而在 CSS 解析完毕后，<span style="color: black;">必须</span>将解析的结果与 DOM Tree 的内容<span style="color: black;">一块</span>进行分析<span style="color: black;">创立</span>一棵 Render Tree，<span style="color: black;">最后</span>用来进行绘图。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Render Tree 中的元素（WebKit 中<span style="color: black;">叫作</span>为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，<span style="color: black;">区别</span>的「行」会<span style="color: black;">作为</span> render tree 种<span style="color: black;">区别</span>的 renderer。<span style="color: black;">亦</span>有的 DOM 元素被 Render Tree 完全<span style="color: black;">没</span>视，<span style="color: black;">例如</span> display:none 的元素。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">创立</span> Render Tree 时（WebKit 中的「Attachment」过程）， 浏览器就要为<span style="color: black;">每一个</span> DOM Tree 中的元素<span style="color: black;">按照</span> CSS 的解析结果（Style Rules）来确定生成<span style="color: black;">怎么样</span>的 renderer。<span style="color: black;">针对</span><span style="color: black;">每一个</span> DOM 元素，<span style="color: black;">必要</span>在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。<span style="color: black;">选取</span>器的「解析」<span style="color: black;">实质</span>是在<span style="color: black;">这儿</span>执行的 ，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">解析<span style="color: black;">次序</span></h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS匹配不是从左到右进行<span style="color: black;">查询</span>，而是 从右到左进行<span style="color: black;">查询</span> 。<span style="color: black;">倘若</span>从左到右的<span style="color: black;">次序</span>，<span style="color: black;">那样</span>每条<span style="color: black;">选取</span>器都<span style="color: black;">必须</span>遍历<span style="color: black;">全部</span>DOM树，性能很受影响。<span style="color: black;">所说</span><span style="color: black;">有效</span>的CSS<span style="color: black;">便是</span>让浏览器在<span style="color: black;">查询</span>style匹配的元素的时候<span style="color: black;">尽可能</span>进行少的<span style="color: black;">查询</span>, <span style="color: black;">因此</span><span style="color: black;">选取</span>器最好写的简洁一点。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">选取</span>器权重</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">权重，<span style="color: black;">亦</span><span style="color: black;">便是</span> <span style="color: black;">选取</span>器的优先级 ，每条<span style="color: black;">选取</span>器的规则都有其权重，权重大的会覆盖掉权重小的，<span style="color: black;">非常多</span>CSS<span style="color: black;">显现</span>问题的场景，都是某处定义了一个更高权重的规则，<span style="color: black;">引起</span>此处规则不生效。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>样式所在位置，对元素的影响<span style="color: black;">亦</span><span style="color: black;">相关</span>系：内联样式（标签内style形式） &gt; style标签 &gt; link标签。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>一点<span style="color: black;">必须</span><span style="color: black;">重视</span>的是 !improtant ,凡是属性值后加上了 !important ，<span style="color: black;">那样</span>它的值不会被其他值替换。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">权重等级</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">每一个</span><span style="color: black;">选取</span>器在权重级别中都有自己泾渭分明的位置。<span style="color: black;">按照</span><span style="color: black;">选取</span>器种类的<span style="color: black;">区别</span><span style="color: black;">能够</span>分为四类，<span style="color: black;">亦</span>决定了四种<span style="color: black;">区别</span>等级的权重值。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">行内样式，指的是html文档中定义的style</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内样式<span style="color: black;">包括</span>在你的html中 对你的元素产生直接<span style="color: black;">功效</span>，<span style="color: black;">例如</span>:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;h1 style="color: #fff;"&gt;header&lt;/h1&gt;
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">ID<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Id<span style="color: black;">亦</span>是元素的一种标识，<span style="color: black;">例如</span>#div</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">类，属性<span style="color: black;">选取</span>器和伪类<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这一类<span style="color: black;">包含</span><span style="color: black;">各样</span>class，属性<span style="color: black;">选取</span>器，伪类<span style="color: black;">选取</span>器<span style="color: black;">例如</span> :hover,:focus等等。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">元素和伪元素</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">元素跟伪元素<span style="color: black;">选取</span>器，<span style="color: black;">例如</span>:before 与 :after.</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">伪元素<span style="color: black;">选取</span>器只<span style="color: black;">包括</span>以下几种:</p>
    ::after::before::first-letter::first-line::selecton<h2 style="color: black; text-align: left; margin-bottom: 10px;">权重记忆口诀</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从0<span style="color: black;">起始</span>，一个 行内样式+1000 ，一个 id+100 ，一个 属性<span style="color: black;">选取</span>器/class<span style="color: black;">或</span>伪类+10 ，一个元素名，<span style="color: black;">或</span>伪元素+1</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">body #content .data img:hover
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">最后</span>的权重值是0122；#content是一个id<span style="color: black;">选取</span>器加了100，.data是一个class类<span style="color: black;">选取</span>器加了10，：hover伪类<span style="color: black;">选取</span>器加了10， body和img是元素加了1 。<span style="color: black;">仔细</span>参阅【<a style="color: black;">CSS Specificity</a> 】</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css权重规则</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、基本规则</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">相同的权重：以后面<span style="color: black;">显现</span>的<span style="color: black;">选取</span>器为最后规则</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">区别</span>的权重：权重值高则生效</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;section class="weight"&gt;
      &lt;style&gt;
      .weight #weightP {
      color: red; // 0110
      }
      .weight p#weightP {
      color: gray; // 0111 生效
      }
      #weightP {
      color</div>




星☆雨 发表于 2024-8-21 08:04:36

你的话语如春风拂面，温暖了我的心房，真的很感谢。

shouyou 发表于 2024-9-10 01:48:26

你的努力一定会被看见，相信自己，加油。

j8typz 发表于 2024-9-28 23:14:49

谷歌网站排名优化 http://www.fok120.com/

7wu1wm0 发表于 2024-10-11 00:54:11

楼主果然英明！不得不赞美你一下！

nykek5i 发表于 2024-10-15 08:13:56

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。
页: [1]
查看完整版本: CSS 选取器及权重