选择器的CSS属性缩写和优先级问题
几种常见CSS属性的简要描述
有很多方法可以简化CSS代码,但是最常用的方法可能是使用一个简短的属性。
CSS有很多短写的属性,但常用的属性与字体、列表、背景、边框、透明度等没有什么区别。下面是对这些属性的简要总结。
字体属性
字体属性包含一个字体、字体、一行和一个简短的编写方法,这些属性可以节省大量代码。以下是字体的属性及其相应的默认值。
CSS代码将内容复制到剪贴板。
每个属性和默认值字体
字体变体:正常;
线高度:正常;
字体族:不同;
字体重量:正常;
字体样式:正常;
字体大小:中等;
上述6个属性可以合并成一行。根据W3C规范,每个属性的顺序如下所示:
CSS代码将内容复制到剪贴板。
字体属性序列
字体:{字体样式}字体变体,字体大小,字体大小;
请看下面的例子:
CSS代码将内容复制到剪贴板。
字体:14px格鲁吉亚线;
字体:14px / 1.4格鲁吉亚线;
字体:字体轻14px / 1.4格鲁吉亚线;
字体:字体小瓶盖打火机14px / 1.4格鲁吉亚线;
你可以看到一行代码,我们可以替换一段代码,但看起来也更优美,就是在寻找一个属性时不太方便,看着眩晕。
列表属性
列表有三个属性,三个属性分别定义:类型、图像和位置,其属性名和默认值如下所示:
CSS代码将内容复制到剪贴板。
列表样式类型:磁盘;
列表样式图像:无;
列表样式位置:外部;
列表只有三个属性,而不是复杂的,但是我们仍然可以按照W3C规范将这三个属性合并成一行,如下所述:
CSS代码将内容复制到剪贴板。
列表属性很短。
列表样式:{列表样式类型}列表样式位置}样式样式图片};
样本
列表样式:无;
列表样式:磁盘;
列表样式:外部磁盘;
列表样式:磁盘外部URL(PNG);
与以往一样,它基本上是列表属性的名称,然后属性的值按顺序排列。
背景属性
在许多样式,背景属性定义了很多次,每一次他们重复他们的5属性,代码量可成倍增加。以下是它的5个属性名称和默认值:
CSS代码将内容复制到剪贴板。
每个属性和默认的
背景附件:滚动;
背景颜色:透明;
背景位置:左上方;
背景重复:重复;
背景图片:无;
根据W3C规范,它的5个属性的组合如下所述:
CSS代码将内容复制到剪贴板。
后台属性很短。
背景:{背景色}背景图片}背景重复}背景附件}背景位置};
样本
背景:# 777;
背景:URL(图像PNG)00;
背景:# 777网址(图像/ BG。PNG)repeat-x 00;
背景:# 777网址(图像/ BG。PNG)repeat-x固定00;
对于背景的短文,不同标签的用法和效果有细微的差别。如欲了解详情,请查阅官方文件。
边框属性
边界属性比较简单,它的3个属性和默认值如下所示:
CSS代码将内容复制到剪贴板。
属性和它们的默认值边界为
边框宽度:无;
无边框样式;
边框颜色:无;
根据W3C规范,其简要描述如下:
CSS代码将内容复制到剪贴板。
边界属性很短。
边框:{边框宽度{边框样式}边框颜色};
样本
边境:1px solid # 111;
边境:2px点缀# 222;
边境:3px冲# 333;
当然,您还可以为4个边界定义不同的样式:
CSS代码将内容复制到剪贴板。
底部边框:1px solid # 777;
边境:2px固体# 111;
左边界:2px固体# 111;
边境上:1px solid # 777;
CSS选择器的优先权问题
CSS级联样式表。所谓的堆栈,这是,你可以使用多个CSS语句作用于相同的元素,例如,使用CSS定义文字的颜色,并使用另一个CSS定义文字的大小,最后达到图案叠加效果。
这个特性在某种程度上使CSS更方便地定义样式,但也带来了一些复杂性。例如,当多个样式作用于同一元素并作用于同一属性时,元素将最终以何种方式呈现样式
请参考下面的示例:
CSS代码将内容复制到剪贴板。
{ p
颜色:黑色;
背景颜色:白色;
}
div.warning p {
颜色:红色;
}
div p { #谨慎
颜色:黄色;
}
身体#家div p {
颜色:白色;
}
样式表有4组选择器和最终指向P元素,每个风格有一个颜色属性。因此,有可能有多个颜色属性应用到相同的P元素。问题是,以什么样的方式将浏览器的渲染P颜色定义后的颜色是否覆盖第一个定义的颜色
这里涉及一个CSS选择器优先级问题,如果在一个元素上有相同属性的多个效果,那么浏览器将计算相应的选择器优先级,最终将是样式选择器对样式选择器的最高优先级。
你如何计算优先权
优先权的计算通常遵循以下规则:
如果一个元素设置了样式属性,也就是说,它是以行样式设置的,那么样式在该行中的优先级最高,并且没有其他外部样式可以覆盖它。
计算选择器的数量、ID选择器、最高优先级的最大数量。如果id选择器的数量相同,或者如果没有ID选择器,那么请参考下面的第三条规则。
类的数量(例如test)属性选择器的数目(如{ type =提交})和一个数字的伪类(如悬停)的数目,然后添加最高优先组选择器的数目、最多数量。如果总是相同的或0个,则参考以下第四条规则。
除了伪元素选择器(例如第一个字母)之外,数字的标记选择器(如p)的数目加起来最多,总数最高,优先级最高。
如果上面的计算仍然和优先级一样高,那么下面的模式将遵循覆盖样式第一次出现的规则。
现在,回头看前面的例子,四组选择器的优先级分别为0001, 0012、0102, 0103。优先权数字化的原因是比较方便,根据自然数规则(实际上不是自然数),1,<12<102<103,优先度低。