WEB_css优先级的说明

《WEB_css优先级的说明》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、೼䆆CSSӬܜ㑻Пࠡˈ៥Ӏᕫ㽕њ㾷ҔМᰃCSSˈCSSᰃ⫼ᴹخҔМⱘDŽㅔऩ䇈ᴹˈCSSᰃሖ঴ḋᓣ㸼(CascadingStyleSheets)ⱘㅔ⿄DŽᅗⱘ㾘㣗ҷ㸼њѦ㘨㔥ग़৆ϞϔϾ⣀⡍ⱘথሩ䰊↉DŽ⦄೼ᇍѢҢџ㔥义ࠊ԰ⱘ᳟টᴹ䇈ˈᑨ䆹ᕜᇥ≵᳝਀䇈䖛CSSњˈ಴Ў೼ࠊ԰㔥义䖛⿟Ё៥Ӏ㒣ᐌ䳔㽕⫼ࠄDŽ៥Ӏ㛑䗮䖛CSSЎ᭛ḷ䆒㕂ЄᆠϨᯧѢᬍⱘ໪㾖ˈҹޣ䕏㔥义ࠊ԰㗙ⱘᎹ԰䋳ᢙˈҢ㗠ޣ䕏ࠊ԰ঞৢᳳ㓈ᡸⱘҷӋDŽ݊ᅲ⦄೼䖬ᴹ䆆CSSᰃҔМˈCSS᳝ҔМ԰⫼ᅠܼᰃ໮ԭⱘˈⳌҢџ㔥义ࠊ԰ⱘ᳟ট䛑Ꮖ㒣៪໮៪ᇥⱘ᥹㾺䖛њDŽ㿔ᔦℷӴˈᓔྟ

2、䖯ܹҞ໽ⱘ䆱乬DŽϔǃҔМᰃCSSӬܜ㑻?᠔䇧CSSӬܜ㑻ˈेᰃᣛCSSḋᓣ೼⌣㾜఼Ё㹿㾷ᵤⱘܜৢ乎ᑣDŽѠǃCSSӬܜ㑻㾘߭᮶✊ḋᓣ᳝Ӭܜ㑻ˈ䙷МህӮ᳝ϔϾ㾘߭ᴹ㑺ᅮ䖭ϾӬܜ㑻ˈ㗠䖭ϾĀ㾘߭āህᰃᴀ⃵᠔䳔㽕䆆ⱘ䞡⚍DŽḋᓣ㸼Ёⱘ⡍⅞ᗻᦣ䗄њϡৠ㾘߭ⱘⳌᇍᴗ䞡ˈᅗⱘ෎ᴀ㾘߭ᰃ˖1ǃ㒳䅵䗝ᢽヺЁⱘIDሲᗻϾ᭄DŽ2ǃ㒳䅵䗝ᢽヺЁⱘCLASSሲᗻϾ᭄DŽ3ǃ㒳䅵䗝ᢽヺЁⱘHTMLᷛ䆄ৡϾ᭄DŽ᳔ৢˈᣝℷ⹂ⱘ乎ᑣݭߎϝϾ᭄ᄫˈϡ㽕ࡴぎḐ៪䗫োˈᕫࠄϔϾϝԡ᭄(css2.1ᰃ⫼4ԡ᭄㸼⼎)DŽ(⊼ᛣˈԴ䳔㽕ᡞ᭄ᄫ䕀ᤶ៤ϔϾҹϝϾ᭄ᄫ

3、㒧ሒⱘ᳈໻ⱘ᭄)DŽⳌᑨѢ䗝ᢽヺⱘ᳔㒜᭄ᄫ߫㸼ৃҹᕜᆍᯧ⹂ᅮ䕗催᭄ᄫ⡍ᗻޠ偒Ѣ䕗Ԣ᭄ᄫⱘDŽ՟བ˖1ǃ↣ϾID䗝ᢽヺ(#someid)ˈࡴ0,1,0,0DŽ2ǃ↣Ͼclass䗝ᢽヺ(.someclass)ǃ↣Ͼሲᗻ䗝ᢽヺ(ᔶབ[attr=value]ㄝ)ǃ↣ϾӾ㉏(ᔶབ:hoverㄝ)ࡴ0,0,1,0DŽ3ǃ↣Ͼܗ㋴៪Ӿܗ㋴(:firstchild)ㄝˈࡴ0,0,0,1DŽ4ǃ݊ᅗ䗝ᢽヺࣙᣀܼሔ䗝ᢽヺ*ˈࡴ0,0,0,0DŽⳌᔧѢ≵ࡴˈϡ䖛䖭гᰃϔ⾡specificityˈৢ䴶Ӯ㾷䞞DŽϝǃ⡍ᗻߚ㉏ⱘ䗝ᢽヺ߫㸼ҹϟᰃϔϾᣝ⡍

4、ᗻߚ㉏ⱘ䗝ᢽヺⱘ߫㸼˖ऩҢϞ䴶䖭Ͼ㸼ᴹⳟˈ䉠Ԑϡ໻ད⧚㾷ˈϟ䴶ݡ㒭ߎϔᓴ㸼˖䗮䖛Ϟ䴶ˈህৃҹᕜㅔऩⱘⳟߎˈHTMLᷛ䆄ⱘᴗ䞡ᰃ1,CLASSⱘᴗ䞡ᰃ10,IDⱘᴗ䞡ᰃ100ˈ㒻ᡓⱘᴗ䞡Ў0(ৢ䴶Ӯ䆆ࠄ)DŽᣝ䖭ѯ㾘߭ᇚ᭄ᄫヺІ䗤ԡⳌࡴˈህᕫࠄ᳔㒜ⱘᴗ䞡ˈ✊ৢ೼↨䕗প㟡ᯊᣝ✻ҢᎺࠄেⱘ乎ᑣ䗤ԡ↨䕗DŽӬܜ㑻䯂乬݊ᅲህᰃϔϾކさ㾷އⱘ䯂乬ˈᔧৠϔϾܗ㋴(ݙᆍ)㹿CSS䗝ᢽヺ䗝Ёᯊˈህ㽕ᣝ✻Ӭܜ㑻প㟡ϡৠⱘCSS㾘߭ˈ䖭݊Ё⍝ঞࠄⱘ䯂乬݊ᅲᕜ໮DŽ䇈ࠄ䖭䞠ˈ៥Ӏϡᕫϡ䇈ϔϟCSSⱘ㒻ᡓᗻDŽಯǃCSSⱘ㒻ᡓᗻ4.1㒻ᡓⱘ㸼⦄

5、㒻ᡓᰃCSSⱘϔϾЏ㽕⡍ᕕˈᅗᰃձ䌪Ѣ⼪ܜ-ৢҷⱘ݇㋏ⱘDŽ㒻ᡓᰃϔ⾡ᴎࠊˈᅗܕ䆌ḋᓣϡҙৃҹᑨ⫼ѢᶤϾ⡍ᅮⱘܗ㋴ˈ䖬ৃҹᑨ⫼ѢᅗⱘৢҷDŽ՟བϔϾBODYᅮНњⱘ买㡆ؐгӮᑨ⫼ࠄ↉㨑ⱘ᭛ᴀЁDŽḋᓣᅮН˖В՟ҷⷕ˖В՟ᬜᵰ˖䖭↉ҷⷕⱘᑨ⫼㒧ᵰᰃ˖ĀCSS㒻ᡓᗻⱘ⌟䆩ā䖭↉䆱ᰃ㑶买㡆ⱘˈĀ㒻ᡓᗻā޴Ͼᄫ⬅Ѣᑨ⫼њᷛㅒˈ᠔ҹᰃ㉫ԧDŽᕜᰒ✊ˈ䖭↉᭛ᄫ䛑㒻ᡓњ⬅body{color:#f00;}ḋᓣᅮНⱘ买㡆DŽ䖭гህᰃЎҔМ䇈㒻ᡓᗻᰃCSSⱘϔ䚼ߚDŽ✊㗠CSS㒻ᡓᗻⱘᴗ䞡ᰃ䴲ᐌԢⱘˈᰃ↨᱂䗮ܗ㋴ⱘᴗ䞡䖬㽕Ԣⱘ0DŽ៥ӀҡҹϞ

6、䴶ⱘВ՟ҷⷕЎ՟˖೼ḋᓣᅮНЁ⏏ࡴϔᴵ˖В՟ᬜᵰ˖থ⦄া䳔㽕㒭ࡴϾ买㡆ؐህ㛑㽚Ⲫᥝᅗ㒻ᡓ㞾ⱘḋᓣ买㡆DŽ⬅ℸৃ㾕˖ӏԩᰒ⼎⬇ᯢⱘ㾘߭䛑ৃҹ㽚Ⲫ݊㒻ᡓḋᓣDŽ4.2㒻ᡓⱘሔ䰤ᗻ㒻ᡓᰃCSS䞡㽕ⱘϔ䚼ߚˈ៥Ӏ⫮㟇ϡ⫼এ㗗㰥ᅗЎҔМ㛑໳䖭ḋˈԚCSS㒻ᡓгᰃ᳝䰤ࠊⱘDŽ᳝ϔѯሲᗻϡ㛑㹿㒻ᡓˈབ˖border,margin,padding,backgroundㄝDŽḋᓣᅮН˖В՟ҷⷕ˖乘ᳳᬜᵰ˖ᅲ䰙ᬜᵰ˖ҢϞ䴶ⱘᬜᵰЁˈ៥Ӏৃҹⳟߎˈborderᰃϡ㛑㹿㒻ᡓⱘˈ䖬᳝ϔѯ݊ᅗⱘሲᗻгᰃབℸˈ䖭䞠ህϡϔϔ߫ВDŽѨǃ䰘ࡴ䇈ᯢ1ǃ᭛ݙ

7、ⱘḋᓣӬܜ㑻Ў1,0,0,0ˈ᠔ҹྟ㒜催Ѣ໪䚼ᅮНDŽ䖭䞠᭛ݙḋᓣᣛᔶབblahⱘḋᓣˈ㗠໪䚼ᅮНᣛ㒣⬅៪

8、䆹ᗑ⬹П)ˈ᠔ҹᣝ✻ৢᴹሙϞॳ߭ˈϔ㠀Ӭܜᴗކさᯊᰃऴϟ亢ⱘDŽ䖬䳔㽕䇈ϔϟˈIEᰃৃҹ䆚߿ԡ㕂䫭䇃ⱘ@importⱘˈԚ᮴䆎@import೼ҔМഄᮍˈᅗ䛑䅸ЎᰃԡѢ᠔᳝݊ᅗ㾘߭ᅮНПࠡⱘˈ䖭ৃ㛑Ӯᓩথϔѯ䇃ӮDŽӬܜᴗ䯂乬ⳟ䍋ᴹㅔऩˈԚ㚠ৢ䖬ᰃ᳝䴲ᐌ໡ᴖⱘᴎࠊˈ೼ᅲ䰙ᑨ⫼Ё䳔㽕໮໮⬭ᛣDŽ