CSS权重问题
常见CSS选择器的权重和优先级
常见CSS选择器的权重和优先级⼀、常见CSS选择器【元素选择器】1、通配选择器：*（匹配所有元素）a、效率不⾼，页⾯上的标签越多，效率越低，所以页⾯上最好不要出现这个选择器2、标签选择器：li（匹配标签为li的元素）a、所有标签都能够当做选择器，⽐如body、h1、dl、ul、span等等b、不管这个标签藏的多深，都能够被选择上c、选择的是所有的，⽽不是某⼀个。
所以是共性，⽽不是特性3、ID选择器：#content（匹配ID属性值等于content的元素）4、类选择器：.list（匹配class属性包含list的元素）a、class可以重复，也就是说，同⼀个页⾯上可能有多个标签同时属于某⼀个类b、同⼀个标签可以同时携带多个类，多个类⽤空格隔开，多个样式有冲突的，以css中后出现的为准c、不要去试图⽤⼀个类名，把某个标签的所有样式写完。
这个标签要多携带⼏个类，共同造成这个标签的样式d、每⼀个类要尽可能⼩，有“公共”的概念，能够让更多的标签使⽤【关系选择器】1、后代选择器：#content h3（匹配ID为content的元素内所有的h3元素）a、空格就表⽰后代，强调⼀下：选择的是后代，不⼀定是⼉⼦b、当要把某⼀个部分的所有的什么，进⾏样式改变，就要想到后代选择器2、⼦元素选择器：#content>h3（匹配ID为content的元素⼦级的h3元素）3、交集选择器：h3.content（匹配class为content的h3元素）a、交集选择器没有空格b、交集选择器可以连续交（⼀般不要这么写）c、交集选择器，我们⼀般都是以标签名开头，⽐如div.haha ⽐如p.special4、并集选择器（分组选择器）：h1，h2（匹配所有的h1和h2元素）5、相邻选择器：h1+h2（匹配 h1 元素之后紧跟的 h2 元素）6、兄弟选择器：h1~h2（匹配 h1 元素之后所有的 h2 元素）【属性选择器】1、a[class]：匹配具有 class 属性值的 a 的元素2、a[target="_blank"]：匹配 target 属性值等于 _blank 的 a 元素3、a[href^="https"]：匹配 href 属性值以 https 开头的 a 元素4、a[href$=".jpg"]：匹配 href 属性值以 .jpg 结尾的 a 元素5、a[href*="baike"]：匹配 href 属性值包含 baike 的 a 元素6、a[class~="abc"]：匹配 class 属性值以空格为分隔符，其中有⼀个等于 abc 的 a 元素伪类选择器和伪元素选择器使⽤频率不⾼，本⽂暂不说明，详细⽰例可参考：⼆、CSS选择器权重和优先级共分为5个等级：第1等：提升指定样式规则的应⽤优先权，如：color:red !important，权值为10000（不建议使⽤）第2等：代表内联样式，如: style="xxx"，权值为1000第3等：代表ID选择器，如：#content，权值为100第4等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10第5等：代表元素选择器和伪元素选择器，如div，p，权值为1通⽤选择器（*），⼦选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0三、CSS选择器权重计算1、元素被两个css样式选中，选择权重⼤的样式，如果权重⼀样，以css中后出现的为准2、元素没有被css样式选中，要显⽰继承的样式时，使⽤就近原则2、继承的样式权重为0（color、 text-开头的、line-开头的、font-开头的样式都可以继承）判断⼀块内容的样式是什么？按照以下步骤：HTML代码：<div id="content"><div id="main-content"><h2>CSS简介</h2><p>CSS是⼀组格式设置规则，⽤于控制Web页⾯的外观。
css选择器，权重
css选择器，权重css选择器选择器的权重在css中，那个选择器的权重⾼，就⾛谁的样式标签选择器的权重是1class选择器的权重是10id选择器的权重是100⾏间样式的权重是1000带有关键字！important 的 css 属性权重⽆穷⼤例⼦：p{background: red!important;}权重的计算将选择器上⾯的权重进⾏叠加后的总和就是该选择器的权重例⼦： #auc .a p{background-color：red；} （总权重是：#auc .a p）权重计算的规则内联样式，如：style+“.....”权值为1000id选择器，如：#content，权值为0100类，伪类，属性选择器，如content，权值为0010类型选择器，伪类选择器，如div p，权值为0001继承的样式没有权值权重相等的时候，后⾯的会覆盖前⾯的例⼦：<style type="text/css">p .noa{background-color: red;}.nva span{background-color: aqua;}</style></head><body><p class="noa"><span class="nva">hello</span></p></body>css选择器的种类标签权重是0001类class 权重是0010 相等于255个标签选择器id 权重是0100 相当于255个类*通配符代表所有的标签权重是0000后代选择器 a p 权重是累加0011⼦代选择器 .a>p 权重是0011交集选择器 .a#divp.a{background：red；}并集选择器 .a,.d.b .a{background: red;}css的⼏种形式1.⾏间样式将 style 写在标签内的充当标签标签属性例⼦：<div class="nav" style="background: red;">adf</div>2.⾏内样式例⼦：<style>.div{background-color: red;}.a{background-color：red；}</style>3.外联样式例⼦：<link rel="stylesheet" type="text/css" href=""/>css选择器的两⼤特性1.继承性继承性就是所有跟⽂本字体有关的属性都会被⼦元素继承。
大众品牌销售CSS调研指标和权重
大众品牌销售CSS调研指标和权重随着时代的发展，大众品牌在市场中的竞争越来越激烈。
为了更好地了解消费者对大众品牌的认知和购买倾向，需要进行大众品牌销售CSS （Customer Satisfaction Survey）调研。
在进行调研时，需要制定一些指标和权重，来评估消费者对大众品牌的满意度和忠诚度。
下面是一个关于大众品牌销售CSS调研指标和权重的例子。
一、品牌知名度（权重：20%）品牌知名度是指消费者对于大众品牌在市场中的知晓程度。
可以通过以下指标来衡量：1.品牌知晓率：消费者是否知道大众品牌并能够准确地识别它。
2.品牌关注度：消费者对大众品牌的关注程度和兴趣程度。
二、品牌形象（权重：25%）品牌形象是指消费者对大众品牌的整体认知和印象。
可以通过以下指标来衡量：1.品牌形象评价：消费者对大众品牌的好感度、信任度、专业度等的评价。
2.品牌一致性：大众品牌在不同渠道、不同产品或服务中的表现是否一致。
三、产品质量（权重：30%）产品质量是指消费者对大众品牌产品的质量满意度。
可以通过以下指标来衡量：1.产品功能：大众品牌产品是否满足消费者的需求和期望。
2.产品可靠性：大众品牌产品的使用寿命和持久性。
3.产品性价比：大众品牌产品的价格与性能之间的比较。
四、服务质量（权重：15%）服务质量是指消费者对大众品牌提供的售前售后服务的满意度。
可以通过以下指标来衡量：2.售后服务：消费者在购买产品后接受到的服务质量评价，如退货、维修、保修等。
五、价格策略（权重：10%）价格策略是指消费者对大众品牌产品价格的满意度。
可以通过以下指标来衡量：1.产品价格：与竞争品牌相比，大众品牌的产品价格是否具有竞争力。
2.促销活动：大众品牌的促销活动是否能够吸引消费者，并提供具有价值的购买机会。
六、品牌忠诚度（权重：10%）品牌忠诚度是指消费者对大众品牌的忠诚程度和回购倾向。
可以通过以下指标来衡量：1.回购率：消费者再次购买大众品牌产品的比例。
link和@import的区别
link和@import的区别我们都知道，外部引⼊ CSS 有2种⽅式，link标签和@import。
它们有何本质区别，有何使⽤建议，在考察外部引⼊ CSS 这部分内容时，经常被提起。
如今，很多学者本着知其然不欲知其所以然的学习态度，不求甚解，只求结论。
所以，本⽂遵循 css hack 的渐进识别原则，结论→区别→争议→细节→祖坟→感想，逐渐加深理论层级，⼒争每个 level 的读者，都能 get 到⾃⼰想要的内容，不必继续阅读下去。
结论就结论⽽⾔，强烈建议使⽤link标签，慎⽤@import⽅式。
这样可以避免考虑@import的语法规则和注意事项，避免产⽣资源⽂件下载顺序混乱和http请求过多的烦恼。
区别1.从属关系区别@import是 CSS 提供的语法规则，只有导⼊样式表的作⽤；link是HTML提供的标签，不仅可以加载 CSS ⽂件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别加载页⾯时，link标签引⼊的 CSS 被同时加载；@import引⼊的 CSS 将在页⾯加载完毕后被加载。
3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别可以通过 JS 操作 DOM ，插⼊link标签来改变样式；由于 DOM ⽅法是基于⽂档的，⽆法使⽤@import的⽅式插⼊样式。
5.权重区别(该项有争议，下⽂将详解)link引⼊的样式权重⼤于@import引⼊的样式。
争议不知从什么时候开始，当你在⽹上搜索link和@import的区别时，千篇⼀律的答案⾥就悄悄的多了⼀句“link引⼊的样式权重⼤于@import引⼊的样式”。
但是并没有⼀份答案，附带着对这句话的任何解释或实例。
这句话究竟是什么意思，该怎么理解呢？发扬探索精神，我们不妨继续查阅资料。
后来发现，还是有不少⽂章和帖⼦，对这句话表⽰质疑，进⽽⾃⼰写了 demo 去验证，验证的结果，确实⽆法与这句话相吻合。
css优先级计算规则——权重
css优先级计算规则——权重⼀、css的优先级 当对同⼀个元素设置相同的多个声明时，会按照优先级的⾼低选择应⽤哪种声明。
<style>#id{color:red;}p{color:blue;}</style><div id="te"> <!-- p元素内的颜⾊设置为black，因为对p元素的设置，该段代码中⾏内样式的优先级最⾼ --!><p id="id" style="color:black;"></p></div>⼆、优先级的计算⽅式——权重 1、权重计算的基础 内联样式：1000 id选择器：0100 类、伪类、属性选择器：0010 元素、伪元素选择器：0001 通配符:0000 2、⽐较规则 a、1,0,0,0 > 0,99,99,99 b、内部样式和外部样式优先级相同 c、权重相同的情况下，后写的会覆盖先写的样式 d、使⽤后代选择器和⼦类选择器，则需要把某个元素所有的修饰权值相加，即修饰的越精确，权值越⾼，如： .class p[type="text"]{color:#000;}/*权值：0021*/， 该样式中，关于p元素的权值为，⼀个类选择器0010，⼀个元素选择器0001，⼀个属性选择器0010，最终结果0021。
<div id="te" class="cte"><div>div</div><p type="text">345</p><p id="id">123</p><p class="class">666</p><p text="text">777</p><p style="color=red;"></p><!-- 权值：1000 --!></div>*{color:green;}/*权值：0000*/p{color:#00f;}/*权值：0001*/div p{color:orange;}/*权值：0002*/.class{color:gray;}/*权值：0010*/.class p[type="text"]{color:#000;}/*权值：0021*/#id{color:red;}/*权值：0100*/div #id{color:red;}/*权值：0101*/三、特殊的优先级 !important，它没有权重，但是加上这个标签后，该声明就是最⾼优先级，⼤于内联样式。
关于css权重计算
关于css权重计算摘要: css权重的顺序为：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承根据 CSS 规范，具体性越明确的样式规则，权重值越⾼。
计算权重值的依据，并不是许多⽂章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在⼤多数情况下能够得到正确的结果。
选择器权重值的计算A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。
B：计算该选择器中ID的数量。
（例如，#header 这样的选择器，计算为 0, 1, 0, 0）。
C：计算该选择器中伪类及其它属性的数量（包括类选择器、属性选择器等，不包括伪元素）。
（例如， .logo[id='site-logo'] 这样的选择器，计算为 0, 0, 2, 0）。
D：计算该选择器中伪元素及标签的数量。
（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。
CSS2 规范中给出的⼀些例⼦：* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */根据这样的定义，所以很多⽂章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越⼤权重值越⾼。
CSS权重特殊性（优先级）
CSS权重特殊性（优先级）
CSS优先级
⼀.
在定义CSS样式时，经常出现两件或更多规则应⽤在同⼀元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意⼀些特殊的情况，如：
--继承样式的权重为0,即在嵌套结构中，不管⽗元素样式的权重多⼤，被⼦元素继承时，他的权重都为0,也就是说⼦元素定义的样式覆盖继承来的样式。
--⾏内样式优先，应⽤style属性的元素，其⾏内样式的权重⾮常⾼，可以理解为远⼤于100。
总之，他拥有⽐上⾯提⾼的选择器都⼤的优选级。
--权重相同时，CSS遵循就近原则，也就是说靠近元素的样式具有最⼤的优先级，或者说排在最后的样式优先级最⼤。
CSS定义了⼀个important命令，该命令被赋予最⼤的优先级。
也就是说不管权重如何以及样式位置的远近，important具有最⼤优先级。
⼆. CSS特殊性（Specificity）
关于CSS权重，我们需要⼀套计算公式来去计算，这个就是CSS Specificity,我们称为CSS特性或称⾮凡性，它是⼀个衡量CSS值优先级的⼀个标准，具体规范如下：
specificity⽤⼀个四位的数字串(CSS2是三位)来表⽰，更像四个级别，值从左到右，左⾯的最⼤，⼀级⼤于⼀级，数位之间没有时制，级别之间不可超越。
继承或者"的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个⾏内样式贡献值 1,0,0,0
每个!important贡献值 ∞ ⽆穷⼤。
CSS权重的等级划分
CSS权重的等级划分CSS权重CSS权重指的是样式的优先级，有两条或多条样式作⽤于⼀个元素，权重⾼的那条样式对元素起作⽤,权重相同的，后写的样式会覆盖前⾯写的样式。
权重的等级可以把样式的应⽤⽅式分为⼏个等级，按照等级来计算权重1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪类和属性选择器，如： content、:hover 权重值为105、标签选择器和伪元素选择器，如：div、p、:before 权重值为16、通⽤选择器（*）、⼦选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0权重的计算实例1、实例⼀：<style type="text/css">div{color:red !important;}</style>......<div style="color:blue">这是⼀个div元素</div><!--两条样式同时作⽤⼀个div，上⾯的样式权重值为10000+1，下⾯的⾏间样式的权重值为1000，所以⽂字的最终颜⾊为red-->2、实例⼆：<style type="text/css">#content div.main_content h2{color:red;}#content .main_content h2{color:blue;}</style>......<div id="content"><div class="main_content"><h2>这是⼀个h2标题</h2></div></div><!--第⼀条样式的权重计算： 100+1+10+1，结果为112；第⼆条样式的权重计算： 100+10+1，结果为111；h2标题的最终颜⾊为red-->。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
除了specificity还有一些其他规则 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如 <div style="color: red">blah</div>的样式，而外部定义指经由<link>或<style> 标签定义的规则。 有!important声明的规则高于一切。 如果!important声明冲突，则比较优先权。 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选 择符*定义的规则)。 关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定 义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权 冲突时是占下风的。 这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在 什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些留意。 important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
举一些例子吧： 程序代码 h1 {color: red;} /* 只有一个普通元素加成，结果是 0,0,0,1 */ body h1 {color: green;} /* 两个普通元素加成，结果是 0,0,0,2 */ --后者胜出 -------------------------------------------------------------------------------------------h2.grape {color: purple;} /* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/ h2 {color: silver;} /*一个普通元素，结果是 0,0,0,1 */ --前者胜出 -------------------------------------------------------------------------------------------html > body table tr[id="totals"] td ul > li {color: maroon;} /* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */ li#answer {color: navy;} /* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */ --后者胜出