当前位置: 首页 > Web前端 > CSS

CSS样式级联规则

时间:2023-03-31 00:00:01 CSS

1.查找浏览器加载每个页面时应用于每个元素和属性的所有声明。以此为基础,会找到每条CSS规则,指明所有受影响的HTML元素2.按顺序和权重排序浏览器依次检查5个源并设置匹配属性。如果下一个源中也定义了匹配属性,则更新该属性的值。5个来源:1.浏览器默认样式表2.设置浏览器字体大小改变默认样式3.链接引用的css文件4.style中编写的样式代码5.内联样式声明权重。如下!important用于增加语句的权重。这样,就不需要考虑其他来源了。p{颜色:绿色!重要;font-size:12pt;}顺序决定字重。如果两个规则影响一个元素的相同属性,并且它们具有相同程度的特殊性,则位置最低(或最后声明)的规则获胜。3.按特异度排序:特异度表示一条规则的清晰程度p{font-size:12px;}p.largetext{font-size:16px;}第二条规则既有标签名又有类名,所以比较特殊指数越高,第二条规则覆盖第一条规则。特异性的计算:ICE公式1.如果selector中有ID,则在I的位置加1;2、如果选择器中有类,则在C的位置加1;3、如果selector中有ID,则在C的位置加1;元素(标签)名称,只需在E的位置加1即可;4.得到一个三位数的号码。好吧,让我们通过几个例子来了解如何指定度数。P0-0-1specificity=1p.largetext0-1-1specificity=11p#largetext1-0-1specificity=101bodyp#largetext1-0-2specificity=102bodyp#largetextul.mylist1-1-3degreeofspecification=113bodyp#largetextul.mylistli1-1-4degreeofspecification=114在这里,每个选择器比前一个选择器更具体。4.什么是CSS选择器?哪些属性可以继承?1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul>li)6.后代选择器(lia)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)*可继承样式:font-sizefont-familycolor,ULLIDLDLDDDT;*不可继承的样式:borderpaddingmarginwidthheight;