前端开发您现在的位置是:首页 > 博客日志 > 前端开发

css 选择器和优先级

<a href='mailto:'>微wx笑</a>的头像微wx笑 2022-06-20前端开发 0 0关键字: css  选择器  优先级  

1. css选择器1 .className1.className2 : 选择class属性中同时具有className1和className2的所有元素;2 .className1 .className2: 选择类名className1元素后代的所有

1. css选择器

1   .className1.className2 :  选择class属性中同时具有className1和className2的所有元素;
2  .className1 .className2:  选择类名className1元素后代的所有类名为className2的元素;
3  #idName: 选择id为idName的所有元素;
4 *: 选择所有元素;
5 element(div,p等标签): 所有改标签元素;
6 element.className:   选择class为className的所有element元素;
7 div, p : 选择所有div和p元素;
8 div  p : 选择div内的所有p元素;
9 div > p: 选择父元素是div的所有p元素;
10 div + p : 选择紧跟div的首个p元素;
11 p::after: 在每个p元素的内容之后插入内容;
12 p::before: 在每个p元素的内容之前插入内容;dNS无知人生

2. css 优先级

  • 2.1  css 优先级算法
    每个规则对应一个初始"四位数":0、0、0、0;若是 行内选择符,则加1、0、0、0;若是 ID选择符,则加0、1、0、0;若是 类选择符/伪类选择符,则分别加0、0、1、0;若是 元素选择符,则分别加0、0、0、1;
    算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。dNS无知人生

  • 2.2 css选择器优先级最高到最低顺序:
    行内样式(直接通过元素属性“style”赋值) > id选择器(#myid)> 类选择器(.myclassname)>  标签选择器(div,h1,p)> 子选择器(ul > li)> 后代选择器(li a)> 伪类选择(a:hover,li:nth-child)dNS无知人生

注:    !important的优先级是最高的,但出现冲突时则需比较”四位数“;优先级相同时,则采用就近原则,选择最后出现的样式;继承得来的属性,其优先级最低。dNS无知人生

CSS 选择器参考手册dNS无知人生

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()