CSS中的样式优先级是什么-创新互联

小编给大家分享一下CSS中的样式优先级是什么，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联公司从2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元凤山做网站,已为上家服务,为凤山各地企业和个人服务,联系电话:028-86922220

控制html元素的三个css规则：

css优先级计算

css继承

css层叠

学习这些规则将使您的CSS开发更上一层楼。

优先级计算

想象一下，你的html包含一个应用了一类“生物”的段落。您还有以下两个css规则：

p { font-size ：12px }
p.bio { font-size ：14px }

你希望段落中的文字大小是12px还是14px？在这种情况下你可以猜测它将是14px。css（p.bio）的第二行比你的class =“bio”段更具体。然而，有时优先级并不容易看到。

例如，考虑以下html和css

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

乍一看，第一行css可能看起来更具体，但实际上上面的第二行更符合段落的字体大小。这是为什么？

要回答这个问题，我们需要考虑优先级规则。

通过计算css的各种成分并以（a，b，c，d）形式表达它们来计算特异性。这将通过一个例子更清楚，但首先是组件。

元素，伪元素：d = 1 - （0,0,0,1）

类，伪类，属性：c = 1 - （0,0,1,0）

Id：b = 1 - （0,1,0,0）

内联样式：a = 1 - （1,0,0,0）

id比类更具体而不是元素。

您可以通过计算上述每一项并将a，b，c或d加1来计算优先级。同样重要的是要注意0,0,1,0比0,0,0,15更具体。让我们看一些例子来使计算更清晰。

p：1个元素 - （0,0,0,1）

div：1个元素 - （0,0,0,1）

#sidebar：1个id - （0,1,0,0）

div＃sidebar：1个元素，1个id - （0,1,0,1）

div＃sidebar p：2个元素，1个id - （0,1,0,2）

div＃sidebar p.bio:2个元素，1个类，1个id - （0,1,1,2）

让我们再看一下上面的例子

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

第二个具有更高的优先级，因此优先。

在我们前进之前的最后一点。重要性胜过优先级，当你使用！important标记css属性时，你会覆盖优先级规则等等

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

表示上面的第一行css优先于第二行而不是第二行。！important仍然是围绕基本规则的特殊性，如果您了解规则的运作方式，您应该永远不需要。

继承

继承背后的想法相对容易理解。元素从其父容器继承样式。如果将body标签设置为使用color：red，那么除非另有说明，否则正文中所有元素的文本也将为红色。

但是，并非所有css属性都是继承的。例如，边距和填充是非继承属性。如果在div上设置边距或填充，则div内的段落不会继承您在div上设置的边距和填充。该段落将使用默认的浏览器边距和填充，直到您另外声明。

但是，您可以显式设置属性以从其父容器继承样式。例如，您可以声明

p { margin ：inherit ; 填充：继承 }

然后你的段落将从它的包含元素继承。

层叠

在最高级别，层叠是控制所有css优先级的，并且如下工作。

1、查找适用于相关元素和属性的所有css声明。

2、按原点和重量排序。Origin指的是声明的来源（作者样式，用户样式，浏览器默认值），权重指的是声明的重要性。（作者的权重大于用户的权重大于默认值。！important比正常声明更重要）

3、计算优先级

4、如果上述所有规则中的两个规则相同，那么最后一个规则获胜。嵌入在html中的CSS总是在外部样式表之后，而不管html中的顺序如何。

上面的＃3很可能是你最需要注意的。使用＃2只需了解您的样式将覆盖用户设置浏览器的方式，除非他们将规则设置为重要。

还要意识到您的样式将覆盖浏览器默认值，但这些默认值确实存在，并且通常会导致跨浏览器问题。使用重置文件，如Eric Meyer的CSS重置或Yahoo的YUI重置CSS有助于将默认样式排除在等式之外。

总结

希望以上内容有助于理清您的一些CSS优先级问题。大多数情况下，如果你的风格存在冲突，问题将归结为优先级。有时你还没有声明一些css，但是一个元素的行为方式你并不期望它可能从父容器或浏览器的默认样式继承了某些css。

声明css时的一般经验法则是声明具有最小优先级的属性来设置元素的样式。例如，使用#sidebar而不是div＃sidebar。我承认打破这个一般规则远远超过我应该，但通过使用所需的最小优先级，它将使您更容易通过声明更具体的样式来覆盖样式。

如果您使用最具优先级，您可能会在以后遇到问题并发现自己必须添加不必要的HTML以便能够添加更多优先级，或者您可能会发现自己不再使用！important或声明内联样式。从最小的优先级开始，仅在需要时添加更多。

看完了这篇文章，相信你对CSS中的样式优先级是什么有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：CSS中的样式优先级是什么-创新互联
URL地址：https://www.cdcxhl.com/article48/hcehp.html

成都网站建设公司_创新互联，为您提供网站导航、微信公众号、品牌网站设计、外贸建站、网站排名、服务器托管

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联