编程小贴士

给你的编程提供小点子


CSS样式的优先级

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗?
如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式。这个时候,你可能就得考虑是不是没考虑优先级问题了。

当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题。
下面列出的就是是选择器的优先级:
行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

标记选择器好比一个更广泛的概念,然后到类别选择器,到ID选择器,最后到行内样式,不断的精确下去,所以越精确,优先级越高。比如下面的盒子模型:
我是标记选择器 div

我是类别选择器 .container

我是ID选择器 #article

我是行内样式 style

下面我对上面这些优先级分别作一下证明:
比如页面中有一个div标签,它有相应的id和class属性,如下所示

<div id=”article”>itdriver.cn</div>

现在我们先给它应用行内样式。
行内样式 : 也即直接应用在元素上的样式。 如 <div style=”</div>。 这个style属性其实就是行内样式。

<div id=”article” style=””>itdriver.cn</div>
这时我们的div背景就变成了黄色了。

接着我们再通过ID选择器来设置div的样式。
ID选择器:所谓ID选择器,就是我们在样式表中,通过一个#id来给元素直接应用样式,大家请看下面的代码,就是如何给一个指定ID的元素应用样式;
/*给id为article的标签应用样式 */
#article{

font-size: 0.8em;
float:right;
}

当我们运行示例的时候,会发现div的背景依然是黄色的,但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明: 行内样式 > ID选择器应用的样式。
接着ID选择器的下面,我们应用class选择器样式
/*给id为article的标签应用样式 */
#article{

font-size: 0.8em;
float:right;
}

/*给所有指定container为class的标签应用样式*/
.container{

font-size: 0.5em;
border:1px solid red;
}
这是我们发现,除了给div加了个黄色边框,div的背景色依然是行内样式设置的黄色,字体大小是#article里设置的。由此我们可以发现,虽然.container写在#article下面,但是却没有覆盖已经定义过的样式,这就证明了:行内样式 > ID选择器样式 > 类选择器样式

最后再应用一个标记选择器样式
/*给id为article的标签应用样式 */
#article{

font-size: 0.8em;
float:right;
}

/*给所有指定container为class的标签应用样式*/
.container{

font-size: 0.5em;
border:1px solid red;
}

div{

font-size:1em;
border:2px solid black;
color:green;
}

我们会发现,只有字体的颜色发生了变化,其他的样式还是之前的样式,这就说明标记选择器没有覆盖前面类选择器,ID选择器以及行内已定义的样式。这也就证明了 : 行内样式 >ID选择器 > 类选择器 > 标记选择器.

170 Responses to “ CSS样式的优先级 ”

  1. mia pron khalifa说道:

    Cbm1pZ you are really a good webmaster. The site loading speed is incredible. It seems that you are doing any unique trick. Also, The contents are masterpiece. you ave done a wonderful job on this topic!

  2. I went over this website and I think you have a lot of good info, saved to favorites (:.

  3. animal coloring说道:

    I?ve learn a few just right stuff here. Definitely worth bookmarking for revisiting. I wonder how so much attempt you put to make this kind of excellent informative website.

  4. We stumbled over here by a different website and thought I might as well check things out. I like what I see so now i am following you. Look forward to checking out your web page for a second time.

  5. Major thanks for the blog.Really looking forward to read more. Want more.

  6. Really enjoyed this article post. Want more.

  7. Do Phuot说道:

    Thanks again for the post.Really looking forward to read more. Want more.

  8. Huawei Nova 4说道:

    Thanks so much for the blog post.Thanks Again. Keep writing.

  9. Oluwadamilare说道:

    it is part of it. With a boy, you will have

  10. Major thankies for the blog post.Thanks Again. Want more.

  11. ItaаАа’б‚Т€ТšаЂаŒаАа’б‚Т€ТžаБТžs actually a great and useful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.

  12. W88说道:

    Major thanks for the article post.Much thanks again. Much obliged.

  13. Wow! Thank you! I continually needed to write on my blog something like that. Can I include a part of your post to my site?

  14. times will often affect your placement in google and could damage your quality score if

  15. tui xach nu说道:

    Thanks for sharing, this is a fantastic article post. Much obliged.

  16. cheap taxi说道:

    Thanks so much for the blog post.Much thanks again. Awesome.

  17. cua tu dong说道:

    I visited a lot of website but I conceive this one has something special in it in it

  18. You could definitely see your expertise in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always go after your heart.

  19. microblog说道:

    Well I sincerely enjoyed reading it. This information procured by you is very constructive for accurate planning.

  20. more details说道:

    wow, awesome post.Thanks Again. Fantastic.

  21. Really informative post.Really thank you! Really Great.

  22. Very good post! We are linking to this great post on our website. Keep up the good writing.

  23. Green Card说道:

    Your style is unique compared to other folks I have read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just book mark this site.

  24. So说道:

    Thorn of Girl Very good information might be identified on this web web site.

  25. Thanks so much for the blog.Really thank you! Really Great.

  26. It as great that you are getting ideas from this piece of writing as well as from our discussion made at this time.

  27. Nwokolo说道:

    Im obliged for the blog post.Really looking forward to read more. Fantastic.

  28. Really appreciate you sharing this blog. Really Great.

  29. your useful info. Thanks for the post. I will certainly return.

  30. I relish, result in I found exactly what I used to be having a look for. You have ended my four day lengthy hunt! God Bless you man. Have a nice day. Bye

  31. There is certainly a lot to find out about this subject. I like all of the points you have made.

  32. It as amazing to visit this website and reading the views of all mates on the topic of this article, while I am also eager of getting familiarity.

  33. mp3 sounds说道:

    It as just permitting shoppers are aware that we are nonetheless open for company.

  34. thuc an cho meo说道:

    Thanks for sharing this excellent piece. Very interesting ideas! (as always, btw)

  35. Thanks for sharing, this is a fantastic blog.Much thanks again. Really Great.

  36. Thank you ever so for you article post.Much thanks again. Keep writing.

  37. There as certainly a lot to learn about this topic. I really like all the points you ave made.

  38. Some truly good articles on this web site, appreciate it for contribution.

  39. see the website说道:

    Looking around I like to browse around the internet, regularly I will just go to Digg and follow thru

  40. tellpopeyes说道:

    Im thankful for the blog post.Really thank you! Will read on

  41. sim nam sinh说道:

    Regards for all your efforts that you have put in this. very interesting information.

  42. Wonderful post! We will be linking to this great post on our site. Keep up the great writing.

  43. Vs model说道:

    Wow! This can be one particular of the most useful blogs We have ever arrive across on this subject. Basically Fantastic. I am also a specialist in this topic so I can understand your hard work.

  44. Thanks again for the blog.Really thank you! Really Great.

  45. url shortener说道:

    You made some good points there. I looked on the internet for the issue and found most guys will go along with with your blog.

  46. womensfit说道:

    Thank you ever so for you article post.Really thank you! Want more.

  47. Very neat article post.Much thanks again. Great.

  48. Successful tips说道:

    Sweet blog! I found it while searching on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I ave been trying for a while but I never seem to get there! Appreciate it

  49. This is one awesome article.Really thank you! Great.

  50. Todays 365说道:

    This is one awesome post.Really thank you! Cool.

  51. This particular blog is without a doubt awesome as well as amusing. I have discovered a bunch of useful advices out of this source. I ad love to visit it every once in a while. Cheers!

  52. That is a great tip especially to those fresh to the blogosphere. Short but very precise info Thanks for sharing this one. A must read post!

  53. you have got an incredible blog right here! would you wish to make some invite posts on my weblog?

  54. Crochet bolero说道:

    There as certainly a great deal to find out about this topic. I like all the points you have made.

  55. That is a good tip particularly to those new to the blogosphere. Brief but very accurate information Many thanks for sharing this one. A must read post!

  56. blue nike说道:

    Very interesting topic , regards for putting up. Nothing great was ever achieved without enthusiasm. by George Ellis.

  57. more说道:

    you ave got an awesome weblog here! would you like to make some invite posts on my weblog?

  58. free cams说道:

    LMFAO is a I really appreciate this post. I?ve been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thanks again

  59. cum treo ong说道:

    That could be the good reason that pay check services are becoming quite popular super real the challenge

  60. kouponkabla.com说道:

    Oakley Sunglasses Outlet Oakley Sunglasses Outlet

  61. This is really interesting, You are a very skilled blogger. I have joined your rss feed and look forward to seeking more of your magnificent post. Also, I ave shared your site in my social networks!

  62. Waec说道:

    Thanks for sharing this fine piece. Very interesting ideas! (as always, btw)

  63. Waec exam说道:

    Keep аАа’аАТ‚аЂТ˜em coming you all do such a great job at such Concepts can at tell you how much I, for one appreciate all you do!

  64. Thank you for another informative website. The place else could I get that type of info written in such a

  65. niw说道:

    This awesome blog is definitely entertaining and informative. I have discovered a lot of handy advices out of this amazing blog. I ad love to return over and over again. Thanks!

  66. agen sbobet说道:

    Very good post. I am dealing with some of these issues as well..

  67. Very nice post. I just stumbled upon your weblog and wished to say that I ave really enjoyed browsing your blog posts. After all I all be subscribing to your rss feed and I hope you write again soon!

  68. You made some clear points there. I did a search on the topic and found most people will approve with your site.

  69. Your style is very unique in comparison to other people I ave read stuff from. Many thanks for posting when you ave got the opportunity, Guess I all just bookmark this blog.

  70. Open heaven说道:

    This very blog is no doubt educating and also informative. I have picked helluva useful stuff out of this blog. I ad love to go back over and over again. Thanks!

  71. tm objection说道:

    please go to the sites we follow, such as this a single, as it represents our picks from the web

  72. It as exhausting to search out educated people on this topic, but you sound like you already know what you are talking about! Thanks

  73. Major thankies for the article.Really thank you! Want more.

  74. You might have a very great layout for your blog i want it to utilize on my web-site also.

  75. Muchos Gracias for your blog article.Thanks Again. Awesome.

  76. WOW emphatically what I was looking representing. Came here by thorough on behalf of other

  77. I value the blog post.Really looking forward to read more. Really Cool.

  78. entclass说道:

    You can definitely see your expertise in the work you write. The sector hopes for even more passionate writers like you who are not afraid to mention how they believe. All the time follow your heart.

  79. Thank you ever so for you article post.Much thanks again. Great.

  80. Wow, great blog article.Much thanks again. Want more.

  81. Pretty! This has been an extremely wonderful article. Thanks for providing this information.

  82. Very nice article, totally what I was looking for.

  83. Thank you, I ave recently been searching for information about this topic for ages and yours is the greatest I ave discovered till now. But, what about the bottom line? Are you sure about the source?

  84. questions for you if you tend not to mind. Is it just me or do some of

  85. Start wanting for these discount codes early, as numerous merchants will start off

  86. There as a lot of folks that I think would really enjoy your content.

  87. Retro 11 low说道:

    just beneath, are quite a few totally not connected web-sites to ours, even so, they may be surely really worth going over

  88. Winners说道:

    Wow, this post is good, my sister is analyzing these kinds of things, thus I am going to convey her.

  89. check out说道:

    Say, you got a nice blog article.Really thank you! Fantastic.

  90. you can check说道:

    Thanks for sharing, this is a fantastic blog.Really thank you!

  91. I will right away grab your rss feed as I can at find your email subscription hyperlink or newsletter service. Do you have any? Please allow me know so that I could subscribe. Thanks.

  92. daklatasvir cena说道:

    you make blogging look easy. The overall look of your web site is great, let alone the

  93. specialist on this space to resolve my problem. Maybe that is you!

  94. Your style is unique in comparison to other folks I have read stuff from. Thanks for posting when you have the opportunity, Guess I all just book mark this site.

  95. Thank you for your article.Much thanks again. Really Cool.

  96. Thank you ever so for you blog post.Really looking forward to read more. Really Great.

  97. I’а†ll right away grasp your rss feed as I can not to find your email subscription link or newsletter service. Do you have any? Kindly permit me recognize so that I may subscribe. Thanks.

  98. Thanks a lot for the blog.Much thanks again. Great.

  99. click here说道:

    Really appreciate you sharing this article.Much thanks again. Will read on

  100. Looking around While I was surfing yesterday I saw a excellent article about

  101. see this website说道:

    My brother recommended I might like this website. He was totally right. This post actually made my day. You cann at imagine simply how much time I had spent for this information! Thanks!

  102. Say, you got a nice blog article.Much thanks again. Want more.

  103. It as difficult to It as difficult to find knowledgeable folks with this topic, however you sound like do you know what you are dealing with! Thanks

  104. blank food label说道:

    marc jacobs outlet ??????30????????????????5??????????????? | ????????

  105. This web site is mostly a stroll-through for the entire info you needed about this and didn

  106. this website说道:

    you heard about this new site ? Dallas SEO

  107. go to说道:

    Way cool! Some extremely valid points! I appreciate you writing this write-up and also the rest of the website is extremely good.

  108. Natural Remedies for Anxiety I need help and ideas to start a new website?

  109. Keo dan gach说道:

    This unique blog is really awesome and besides amusing. I have chosen many useful tips out of this source. I ad love to return again and again. Cheers!

  110. Thanks so much for the blog article.Really looking forward to read more. Keep writing.

  111. Just wanna tell that this is handy , Thanks for taking your time to write this.

  112. casino online说道:

    This web site certainly has all of the information I needed about this subject and didn at know who to ask.

  113. Really enjoyed this blog post.Thanks Again. Really Cool.

  114. Really informative blog article.Really looking forward to read more. Really Cool.

  115. Serina说道:

    Major thanks for the article post.Much thanks again. Cool.

  116. This blog post is excellent, probably because of how well the subject was developped. I like some of the comments too though I would prefer we all stay on the suject in order add value to the subject!

  117. your blog posts. Any way I will be subscribing to your feeds and even I achievement you

  118. There is evidently a bundle to identify about this. I consider you made some nice points in features also.

  119. the home as value, homeowners are obligated to spend banks the real difference.

  120. do说道:

    Shiva habitait dans etait si enthousiaste, conducteur irait ranger de

  121. Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is great, as well as the content!

  122. go there说道:

    I value the article.Thanks Again. Fantastic.

  123. whoah this blog is excellent i love reading your posts. Keep up the great work! You know, a lot of people are searching around for this info, you could aid them greatly.

  124. Keep the excellent function, I study few websites on this amazing site and My partner and i conceive that your web site is actually interesting and possesses lots involving excellent info.

  125. This very blog is really educating as well as factual. I have found a lot of useful stuff out of it. I ad love to come back again soon. Thanks!

  126. genuine parts说道:

    Wow, superb weblog format! How long have you ever been running a blog for? you make blogging look easy. The full look of your website is magnificent, let alone the content material!

  127. go here说道:

    Utterly indited articles , regards for information.

  128. I value the post.Much thanks again. Keep writing.

  129. This unique blog is really cool and besides informative. I have chosen many interesting advices out of this blog. I ad love to come back over and over again. Thanks!

  130. Bandar Ceme说道:

    Nice weblog here! Additionally your site loads up very fast! What host are you using? Can I am getting your affiliate link for your host? I wish my site loaded up as fast as yours lol

  131. Looking forward to reading more. Great article post. Really Great.

  132. You will discover your selected ease and comfort nike surroundings maximum sneakers at this time there. These kinds of informal girls sneakers appear fantastic plus sense more enhanced.

  133. for more details说道:

    It as really a great and useful piece of info. I am glad that you simply shared this helpful

  134. You might have an extremely good layout for the blog i want it to work with on my internet site too

  135. Muchos Gracias for your blog.Really thank you! Cool.

  136. Game Online说道:

    You are my aspiration, I possess few blogs and rarely run out from brand .

  137. I think this is a real great blog.Really looking forward to read more. Really Cool.

  138. Some times its a pain in the ass to read what blog owners wrote but this site is really user pleasant!.

  139. the comments appаА аЂа•ar as if they are coming fr?m brain

  140. click here说道:

    It is challenging to acquire knowledgeable people with this topic, nevertheless, you appear like there as extra you are referring to! Thanks

  141. Very good information. Lucky me I found your site by accident (stumbleupon). I ave bookmarked it for later!

  142. It as nearly impossible to find experienced people in this particular topic, however, you seem like you know what you are talking about! Thanks

  143. This blog is really entertaining as well as amusing. I have found many helpful tips out of this blog. I ad love to return over and over again. Thanks a bunch!

  144. sick and tired of WordPress because I ave had issues

  145. Very informative blog.Thanks Again. Awesome.

  146. bitcoin说道:

    Major thanks for the blog article. Great.

  147. hifu说道:

    Im thankful for the blog.Thanks Again. Fantastic.

  148. bo dam说道:

    Some truly nice stuff on this internet site , I it.

  149. Mobile Computer说道:

    I was suggested this web site by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are incredible! Thanks!

  150. moved here说道:

    Very nice article and straight to the point. I don at know if this is in fact the best place to ask but do you people have any thoughts on where to employ some professional writers? Thx

  151. Whats up. Very nice site!! Man.. Beautiful.. Wonderful.. I all bookmark your blog and take the feeds alsoI am satisfied to locate numerous useful info here within the post. Thank you for sharing

  152. naturehike说道:

    I truly appreciate this blog post. Cool.

  153. like you wrote the book in it or something. I think that you can do with a

  154. Simply wanna state that this is very useful, Thanks for taking your time to write this.

  155. Thanks for sharing, this is a fantastic article.Really looking forward to read more. Will read on…

  156. It as going to be ending of mine day, except before end

  157. suba me说道:

    Fwc9YM This blog is without a doubt awesome and diverting. I have picked a lot of handy stuff out of this blog. I ad love to come back again soon. Cheers!

  158. web explorer, may test this? IE nonetheless is the marketplace chief and a big component

  159. Keep up the superb piece of work, I read few posts on this website and I conceive that your website is very interesting and holds lots of excellent information.

  160. It indeed does It indeed does take quite some time to find great information like this. Thank you very much.

  161. It as exhausting to seek out knowledgeable individuals on this subject, but you sound like you understand what you are speaking about! Thanks

  162. Just wanna input that you have a very nice web site , I like the layout it really stands out.

  163. Thank you for sharing this first-class piece. Very interesting ideas! (as always, btw)

  164. Im thankful for the blog post.Much thanks again. Keep writing.

  165. This site is packed full of good information on installing a home surveillance system. keep up the good work.

  166. go there说道:

    Looking forward to reading more. Great blog article.Much thanks again. Awesome.

  167. There may be noticeably a bundle to learn about this. I assume you made certain nice points in options also.

  168. Major thankies for the blog article.Really thank you!

  169. Spot on with this write-up, I actually believe this site needs far more attention. I all probably be returning to see more, thanks for the advice!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>