当前位置:首页 > 日记 > 正文

选择器的CSS属性缩写和优先级问题

选择器的CSS属性缩写和优先级问题
本文主要介绍CSS属性缩写和选择器的优先级。这是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,优先度低。

相关文章

颓废颓废人格签名感性人格签名

颓废颓废人格签名感性人格签名

颓废,人格,感性,电脑软件,叶子的离去不是风的呼唤,而是抛弃了树。下面的小编辑分享了悲伤的个性签名,欢迎阅读: 悲伤人格签名: 1评论。君主使我想起国王和黄昏。 2。原来永远,只是误会。 三.总有一天你会出现在我的脑海里,你会看到你给我的悲伤…

如何用词让中国象棋地图Word2003教

如何用词让中国象棋地图Word2003教

教程,中国象棋,地图,电脑软件,中国象棋在中国有悠久的历史,它是一个人的对抗性的游戏。由于设备简单,趣味性强,成为流行极为广泛的棋艺活动。下面将教你如何使用Word2003使中国象棋图纸,工艺主要应用形式、绘画、文字和其他工具。 1、创建新的W…

文艺的悲剧人格

文艺的悲剧人格

人格,悲剧,文艺,电脑软件,我把所有的激情用冰冷的水为我单薄的清凉眼底深深地埋深。下面是悲伤签名的悲伤个性的小编辑。我希望你能从中得到一些好处! 文艺人格的悲哀签名: 做一个平凡的女人,找一个可靠的男人,找到一份稳定的爱情。 最可怕的…

用PS制作一个惊人的电动圣诞贺卡GI

用PS制作一个惊人的电动圣诞贺卡GI

动画,圣诞,惊人,电脑软件,PS,本教程是做电子贺卡的朋友,圣诞树动画惊艳PS教程制作的卡片很漂亮,也不是很难,推荐一下。 圣诞节快到了,你制作的电子圣诞卡更耀眼。 方法/步骤 1。打开PS软件,建立一个800×600像素的画布,然后用一个颜料桶工具填充…

excel表自动修正统一文本excel表

excel表自动修正统一文本excel表

文本,修正,电脑软件,excel,Excel表格让自动更正输入一个统一的文本。你不是总是俯视某些固定文本的输入,比如计算机报吗。 1、执行工具自动更正;RARR;命令,打开自动更正对话框;。 2、取代下方的输入框中;pcw(或是其他角色,pcw用小写),在替换;从下面的…

excel表格和如何翻译excel基础

excel表格和如何翻译excel基础

表格,基础,电脑软件,excel,许多报刊杂志都用excel介绍。同时,按住Shift键点击文件菜单,,,原来的关闭菜单项,将全部关闭。最近,我发现如果我们按Shift键并单击编辑菜单,原来的复制和粘贴,将成为复制、;粘贴。使用这个功能,我们可以将一个数据表以图片…

最搞笑的个性签名推荐经典签名。

最搞笑的个性签名推荐经典签名。

推荐,个性签名,搞笑,经典,电脑软件,Ldquo,我还是会在下辈子找到你的,因为你是我之外的傻瓜。Rdquo,为你的QQ选择个性签名。 1,当我感到头晕的时候,我终于明白什么是爱了。 2、下雨了,别忘了打伞,是对的,拍是麻烦的。 3,女人应该有骨头,或者爱谈婚姻,或…

如何处理word代码使用中的乱码

如何处理word代码使用中的乱码

乱码,如何处理,代码,电脑软件,word,有时我们会在Word文档中遇到的乱码的情况。不必担心,我们可以按照以下方法试试看。以下是关于文字的乱码的处理。我希望萧边能对你有用。 一、文档格式方法 这种方法是将受损的Word文档转换成另一种格式,…

经典人格签名琅琊经典人格签名列表

经典人格签名琅琊经典人格签名列表

列表,人格,经典,电脑软件,最近,由胡戈和刘涛主演的琅琊电视节目,在很多人中很受欢迎,其中一些经典的台词可以用来表达多愁善感的个性,这里我们收集了一些来自琅琊的经典语录,以供参考。 1。失去的永远不能恢复。即使小真的能回到这个世界,这是一…

用ps制作三维文本透视图

用ps制作三维文本透视图

文本,透视图,电脑软件,ps,本教程是向朋友介绍PS创建透视3D文字效果的方法。本教程制作的3D文本非常漂亮,难度不大。建议你喜欢你的朋友快速学习。 今天是制作假3D效果的一种方式。假3D效果的制作,主要是层层叠加,给效果带来厚度,方法很简单,大家…

使用宏命令为Excel工作表公式添加

使用宏命令为Excel工作表公式添加

密码,命令,公式,工作,电脑软件,工作表中的大部分数据是由公式计算生成的,那么如何让其他人只看到计算结果并隐藏所使用的公式呢今天我们将介绍使用宏来解决这个问题。 1。创建一个宏 启动Excel,选择mdash;mdash;宏碁;新纪录,在打开的窗口中输入…

搞笑幽默经典人物签名和个性签名

搞笑幽默经典人物签名和个性签名

个性签名,幽默,人物,搞笑,经典,去酒吧的男人大多是为了寻找刺激,而去酒吧的女人中有一半是愤怒的! 在教室里,你不能让学生发现你有纸。多么痛苦啊! 是一样的,为什么我总觉得老师不喜欢绿色学校呢。 如果我有幸能瘦下来,我会买一样的衣服和我的闺…