wrjc1hod 发表于 2024-6-30 07:02:01

CSS 选取器优先级怎么样确定


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS中有以下优先级：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、标记<span style="color: black;">选取</span>器（如：body,div,p,ul,li）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、id<span style="color: black;">选取</span>器（如：id="name",id="name_txt"）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、类<span style="color: black;">选取</span>器（如：id="name",id="name_txt"）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、后代<span style="color: black;">选取</span>器（如：#head .nav ul li 从父集到子孙集的<span style="color: black;">选取</span>器）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5、子元素选择器（如：div&gt;p ,带大于号&gt;）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6、伪类<span style="color: black;">选取</span>器（如：<span style="color: black;">便是</span>链接样式,a元素的伪类，4种<span style="color: black;">区别</span>的状态：link、visited、active、hover。）</p>
    <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>接着来看一下css优先级的概念。</p>
    <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>
    <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>器优先级的算法：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">每一个</span>规则对应一个初始"四位数"：0、0、0、0</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若是 行内<span style="color: black;">选取</span>符，则加1、0、0、0</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若是 ID<span style="color: black;">选取</span>符，则加0、1、0、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>符，则分别加0、0、1、0</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若是 元素<span style="color: black;">选取</span>符，则分别加0、0、0、1</p>算法：将每条规则中，<span style="color: black;">选取</span>符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
    <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>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;">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;">1.id<span style="color: black;">选取</span>器（#myid）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.类<span style="color: black;">选取</span>器（.myclassname）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.标签<span style="color: black;">选取</span>器（div,h1,p）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.子<span style="color: black;">选取</span>器（ul &lt; li）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.后代<span style="color: black;">选取</span>器（li a）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6.伪类<span style="color: black;">选取</span>（a:hover,li:nth-child）</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>的优先级更高，<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>




流星的美 发表于 2024-8-27 09:20:26

软文发布平台 http://www.fok120.com/

情迷布拉格 发表于 2024-9-7 04:19:23

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。

wrjc1hod 发表于 2024-10-16 12:11:43

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。

nykek5i 发表于 2024-10-30 22:55:06

大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。
页: [1]
查看完整版本: CSS 选取器优先级怎么样确定