一道考CSS的题目,求解(最好能说清为什么)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:16:26
Original
1061 Leute haben es durchsucht

Consider following markup<html><head><style>   div.main span {color:red}   span.important {color:green}</style></head><body>   <div class="main">       <span class="important" id="myspan">text</span>   </div></body></html>What colour will be applied to word "text" ?
Nach dem Login kopieren


回复讨论(解决方案)

   div.main span {color:red} //所有DIV下一级class为main和所有是span元素字体颜色为red
   span.important {color:green}//所有span的下一级class为 .important的元素字体颜色为green


然后代码是上往下运行 如果同个元素重复出现   最后显示的是最下面的CSS效果

然后代码是上往下运行 如果同个元素重复出现   最后显示的是最下面的CSS效果


答案是红色呀?
况且div.main span {color:red} 表示的是类名为main的DIV 下的span文字颜色为red,而不是你说的:所有DIV下一级class为main和所有是span元素字体颜色为red。

以bootstrap的概念?解?的?
div.main span {color:red} 是模版?
span.important {color:green} 是元件?
所以理?套用?色的

如果你要套成?色的
改成?? span.important.important {green;}
??就?大?去了

为红色

因为一个 css的使用优先级
是看  样式名称中分段的类型加起来的 数值的大小

div.main span--》  (元素+类)+(元素)
span.important--》  (元素+类)

具体类型代表的权重值忘记了  但是上面那个肯定大

http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
CSS权重概念

类名为main的div下的span标签字体颜色为红色。
类名为important的span标签字体颜色为红色。
text结果为红色。
 div.main span {color:red}的优先级 高于 span.important {color:green}

 
至于原因…… 我也不知道。。。233

div.main span 两个元素一个类
span.important 一个元素一个类
显然前者的权重大于后者,所以是红色

div.main span 两个元素一个类
span.important 一个元素一个类
显然前者的权重大于后者,所以是红色


正解

http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
CSS权重概念


谢谢您了,对我很有帮助

为红色

因为一个 css的使用优先级
是看  样式名称中分段的类型加起来的 数值的大小

div.main span--》  (元素+类)+(元素)
span.important--》  (元素+类)

具体类型代表的权重值忘记了  但是上面那个肯定大


http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
CSS权重概念
哈哈,共同学习,一起进步!

红色啊。。。div main类的作用

id选择器的优先权高于类选择器吧

id选择器的优先权高于类选择器吧


sorry ,看错了


http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
CSS权重概念


谢谢您了,对我很有帮助 客气
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage