6257rv7 发表于 2024-6-30 08:28:35

css 的优先级秩序是什么？


    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>下面的代码进行验证，先去掉!important，验证三种样式表的优先级，<span style="color: black;">而后</span>再加上!important,验证!important的优先级。</p>
            <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
                &lt;html lang="en"&gt;
                &lt;head&gt;
                &lt;meta charset="UTF-8"&gt;
                &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                &lt;title&gt;Document&lt;/title&gt;
                &lt;!-- <span style="color: black;">外边</span>样式表 --&gt;
                &lt;link rel="stylesheet" href="css/waibu.css"&gt;
                &lt;!--<span style="color: black;"><a style="color: black;">内部样式表</a></span>--&gt;
                &lt;style&gt;
                div{
                width:300px !important;
                height:300px !important;
                bac<span style="color: black;">公斤</span>round-color: green !important;
                }
                &lt;/style&gt;

                &lt;/head&gt;
                &lt;body&gt;
                &lt;!-- 行内样式表 --&gt;
                &lt;!-- style="width:100px;height:100px;bac<span style="color: black;">公斤</span>round-color:red" --&gt;
                &lt;div &gt;&lt;/div&gt;
                &lt;/body&gt;
                &lt;/html&gt;</div>
            <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><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>器权重: !important(10000)&gt;行内(1000)&gt;id(100)&gt;类(10)&gt;标签(1)&gt;<span style="color: black;"><a style="color: black;">通配符</a></span>(0)</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>
            <div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">diveng：<span style="color: black;">怎样</span>理解CSS样式表权重与</span></span></a>优先级<span style="color: black;">1 赞同 · 0 评论<span style="color: black;"><span style="color: black;">文案</span></span></span><span style="color: black;"><img src="https://pic2.zhimg.com/v2-810eadf61cc361f06d2fb335feccdbfd_180x120.jpg" style="width: 50%; margin-bottom: 20px;"></span></div>
            <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;"><a style="color: black;">后代<span style="color: black;">选取</span>器</a></span>，相邻兄弟<span style="color: black;">选取</span>器，<span style="color: black;"><a style="color: black;">群组</a></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>案例，清晰易懂，CSS优先级，<span style="color: black;">选取</span>器权重，看上面2篇<span style="color: black;">文案</span>就足够了。</p>
      </span></div>




nykek5i 发表于 2024-10-7 18:26:01

期待你更多的精彩评论，一起交流学习。

1fy07h 发表于 2024-10-22 04:18:18

你的见解独到，让我受益匪浅，期待更多交流。
页: [1]
查看完整版本: css 的优先级秩序是什么？