面試時可能被問到的一些CSS問題
發(fā)布時間：2013-04-08 14:23:38 作者：佚名 
我要評論
我要評論本篇小編為大家介紹在面試時可能被問到的一些CSS問題，希望對有需要的朋友能有所幫助
僅以此篇緬懷那些筆試100次，問100次的CSS問題。
問：
CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級？內聯和important哪個優(yōu)先級高？
選擇符
| 1 | 通配選擇符（*） | 表示頁面內所有元素的樣式 | *{font-size:12px;margin:0;padding:0;} |
| 2 | 類型選擇符（body、div、p、span等） | 網頁中已有的標簽類型作為名稱的選擇符 | div{width:10px;height:10px;} |
| 3 | 群組選擇符（,） | 對一組對象同時進行相同的樣式指派 | a:link,a:visited{color:#fff;} |
| 4 | 層次選擇符(空格) | 包含選擇符對某對象中的子對象進行樣式指派 | #header top{width:100px;} |
| 5 | id選擇符（#） | id選擇符具有唯一性，在頁面中不能重復使用 | #header{width:300px;} |
| 6 | class選擇符（.） | 可以在頁面中重復使用 | .title{width:300px;} |
| 7 | IEhack選擇符(_、*、\0、\9\0;) | 兼容不同的瀏覽器 | .title{_width:50px;*height:30px;} |
可繼承的屬性
復制代碼
代碼如下:azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
優(yōu)先級的四大原則
原則1：繼承沒指定的牛
demo1：
復制代碼
代碼如下:<style type="text/css">
*{font-size:20px}
.class3{ font-size: 12px; }
</style></p> <p><span class="class3">我是多大字號？</span> <!-- 運行結果：.class3{ font-size: 12px; }-->
demo2:
復制代碼
代碼如下:<style type="text/css">
#id1 #id2{font-size:20px}
.class3{font-size:12px}
</style></p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號？</span> </p>
</div> <!--運行結果：.class3{ font-size: 12px; }-->
原則2：#ID > .class > 標簽
demo1：
復制代碼
代碼如下:<style type="text/css">
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
</style></p> <p><span id="id3" class="class3">我是多大字號？</span> <!--運行結果：#id3 { font-size: 25px; }-->
原則3：越具體越牛
demo1：
復制代碼
代碼如下:<style type="text/css">
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
</style></p> <p><div class="class1">
<p class="class2"> <span class="class3">我是多大字號？</span> </p>
</div> <!--運行結果：.class1 .class2 .class3{font-size: 25px;}-->
原則4：標簽#ID > 標簽.class
demo1：
復制代碼
代碼如下:<style type="text/css">
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
</style></p> <p><span id="id3">我是多大字號？</span>
<span class="class3">我是多大字號？</span> <!--運行結果：span#id3{font-size:18px} | span.class3{font-size:18px}-->
最后：當原則之前沖突的時候，原則1 > 原則2 > 原則3 > 原則4
！important
IE6到底認不認識!important？？？
答：認識，但是有一個小 bug。
例如：
復制代碼
代碼如下:<style>
#ida {size:18px}
.classb { font-size: 12px; }
</style></p> <p><div id=“ida” class=“classb”>!important測試：18px</div>
加入!important
復制代碼
代碼如下:<style>
#ida{font-size:18px}
.classb{ font-size: 12px !important; }
</style></p> <p><div id=“ida” class=“classb”>!important測試：12px</div>
IE6 BUG:
復制代碼
代碼如下:<style>
.classb{ font-size: 18px !important; font-size: 12px }
</style></p> <p><div class=“classA”>!important測試：12px</div>
原因和辦法：
這里在ie6下是12像素的字，而其他瀏覽器下是18px的字。
但是當我們把樣式改一下，!important放在后面，即.classb{ font-size: 12px;font-size: 18px !important; },那么ie6下和其他瀏覽器一樣也是18px的字。
相關文章
- 這篇文章主要介紹了你應該知道的5個CSS面試問題小結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-02-05
- 這篇文章主要介紹了前端HTML+CSS筆試題面試題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-10-15
- 在面試過程中，經常會問到使用純css如何實現紅綠燈效果，下面小編把實現代碼分享到腳本之家平臺，需要的朋友參考下吧2018-02-28
- CSS是一門不斷在發(fā)展的“語言”，在我們日常面試前端工作的時候是必不可少的一個知識點，下面這篇文章主要給大家分享介紹了關于前端面試必備之CSS3新特性的相關資料，文中2017-09-05
- 這篇文章主要介紹了CSS常見面試問題匯總(推薦),非常不錯，在前端面試中經常會提到，今天小編把內容整理分享到腳本之家平臺，需要的朋友可以參考下2020-02-18