【總有一些東西要弄清】——說說面試時一系列的CSS問題

僅以此篇緬懷那些筆試100次,問100次的CSS問題。

問:

  CSS選擇符有哪些?哪些屬性可以繼承?優先級?內聯和important哪個優先級高?

選擇符

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;}
5id選擇符(#)id選擇符具有唯一性,在頁面中不能重復使用#header{width:300px;}
6class選擇符(.)可以在頁面中重復使用.title{width:300px;}
7IEhack選擇符(_、*、\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

優先級的四大原則

原則1:繼承沒指定的牛B

demo1:

<style type="text/css"> 
*{font-size:20px} 
.class3{ font-size: 12px; } 
</style> 
<span class="class3">我是多大字號?</span> <!-- 運行結果:.class3{ font-size: 12px; }-->

demo2:

<style type="text/css"> 
#id1 #id2{font-size:20px} 
.class3{font-size:12px} 
</style> <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> <span id="id3" class="class3">我是多大字號?</span> <!--運行結果:#id3 { font-size: 25px; }-->

原則3:越具體越牛B

demo1:

<style type="text/css"> 
.class1 .class2 .class3{font-size: 25px;} 
.class2 .class3{font-size:18px} 
.class3 { font-size: 12px; } 
</style> <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><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><div id=“ida” class=“classb”>!important測試:18px</div>

加入!important

<style>
#ida{font-size:18px}
.classb{ font-size: 12px !important; }
</style><div id=“ida” class=“classb”>!important測試:12px</div>

IE6 BUG:

<style>
.classb{ font-size: 18px !important; font-size: 12px }
</style><div class=“classA”>!important測試:12px</div>

原因和辦法:

  這里在ie6下是12像素的字,而其他瀏覽器下是18px的字。

  但是當我們把樣式改一下,!important放在后面,即.classb{ font-size: 12px;font-size: 18px !important; },那么ie6下和其他瀏覽器一樣也是18px的字。

  

?

?

轉載于:https://www.cnblogs.com/ccto/archive/2013/03/19/2970309.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/259941.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/259941.shtml
英文地址,請注明出處:http://en.pswp.cn/news/259941.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

面試總結之html+css

最近面試了一些公司&#xff0c;和技術總監聊了一些前端技術方面的內容。回來之后我總結了一下&#xff0c;大致可以分為三個模塊&#xff1a;第一、Html與css 方面&#xff1b;第二、瀏覽器解析方面&#xff1b;第三、js方面。打算&#xff0c;分為三篇博文&#xff0c;根據自…

k8s部署tomcat及web應用_k8s部署tomcat的yaml文件

1、k8s部署tomcat的yaml文件apiVersion: apps/v1kind: Deploymentmetadata:name: mytomcatspec:replicas: 5selector:matchLabels:app: mytomcatminReadySeconds: 1progressDeadlineSeconds: 60revisionHistoryLimit: 5strategy:type: RollingUpdaterollingUpdate:maxSurge: 1m…

計算機的發展經歷階段應用領域,計算機的發展階段

計算機的發展階段以下文字資料是由(歷史新知網www.lishixinzhi.com)小編為大家搜集整理后發布的內容&#xff0c;讓我們趕快一起來看一下吧&#xff01;計算機經歷了四個發展階段。1、電子管數字機(1946—1958年)硬件方面&#xff0c;邏輯元件采用的是真空電子管&#xff0c;外…

全球都對HTTPS拋出了橄欖枝,為什么?你又該怎么辦?

2019獨角獸企業重金招聘Python工程師標準>>> 互聯網發展20多年&#xff0c;大家都習慣了在瀏覽器地址里輸入HTTP格式的網址。但前兩年&#xff0c;HTTPS逐漸取代HTTP&#xff0c;成為傳輸協議界的“新寵”。 早在2014年&#xff0c;由網際網路安全研究組織Internet …

jqGrid格式化日期

colModel列中屬性 formatter:date, formatoptions:{srcformat: Y-m-d H:i:s, newformat: Y-m-d H:i:s}, 其它參數參考API轉載于:https://www.cnblogs.com/GYoungBean/archive/2013/03/20/2970598.html

大一大學計算機考試難嗎,新生必看!大一期間必考的3個證書,不考后悔,越拖越難考!...

原標題&#xff1a;新生必看!大一期間必考的3個證書&#xff0c;不考后悔&#xff0c;越拖越難考!9月開學季&#xff0c;大學新生也陸陸續續來到了學校報到&#xff0c;開啟自己美好的大學生活!但是!小編要提醒大家的是千萬不要相信高中老師說的那句&#xff1a;“上了大學你們…

我是如何實用:before :after

本文地址http://www.cnblogs.com/Bond/p/3972854.html 最近一直做移動端&#xff0c;沒和IE6打交道了&#xff0c;瞬間感覺世界變美好了。移動端雖然還是各種坑&#xff0c;但是比起修復IE6那還是輕松多了&#xff0c;移動端很多效果可以用CSS3來做&#xff0c;感覺一切都和諧…

rockmq運維指令_RocketMQ運維監控

一個完善的消息中間件&#xff0c;監控是必不可少的功能。通過監控我們可以查看系統的運行情況&#xff0c;是否出現異常&#xff0c;是系統穩定性和運維的基礎。1、監控平臺搭建RocketMQ控制臺需要自己去下載編譯打包&#xff0c;可以在編譯時設置其namesrvAddr和端口號&#…

Maven學習之 倉庫鏡像

使用倉庫鏡像 倉庫可以聲明在項目中&#xff0c;但有時&#xff0c;你可能想要使用某個倉庫的鏡像&#xff0c;而不去修改項目文件。 使用鏡像的原因&#xff1a; 有一個同步鏡像&#xff0c;且速度更快。想使用你自己控制的內部倉庫。想運行repository manager來提供一個本地的…

誰看的最多

今天想到了昨天看到一道acm題目&#xff0c;難度入門級別。“誰看的最多”&#xff0c;題目大概是這樣的&#xff1a;一隊列的人3 2 1 6 4 5&#xff0c;數值的大小表示該人的高度。每個人只能看到前面比他高的人&#xff0c;如1可以看見2、3。但是&#xff0c;如果有人B比他高…

計算機與網絡應用基礎知識下上機考試,計算機應用基礎知識考試

計算機應用基礎課程是提高高職學生計算機文化水平的公共必須課&#xff0c;那么你對計算機應用基礎知識了解多少呢?以下是由小編整理關于計算機應用基礎知識試題的內容&#xff0c;希望大家喜歡!計算機應用基礎知識試題1、計算機系統由硬件系統和軟件系統兩部分組成&#xff0…

分支-08. 高速公路超速處罰

按照規定&#xff0c;在高速公路上行使的機動車&#xff0c;超出本車道限速的10%則處200元罰款&#xff1b;若超出50%&#xff0c;就要吊銷駕駛證。請編寫程序根據車速和限速自動判別對該機動車的處理。 輸入格式&#xff1a;輸入在一行中給出2個正整數&#xff0c;分別對應車速…

lua 從一串數字中取出偶數位的數字_為什么JavaScript中 0.1 0.2 不等于0.3?

在 js 中進行數學的運算時&#xff0c;會出現0.10.20.300000000000000004的結果&#xff0c;一開始認為是浮點數的二進制存儲導致的精度問題&#xff0c;但這似乎不能很好的解釋為什么在同樣的存儲方式下0.30.40.7可以得到正確的結果。本文主要通過浮點數的二進制存儲及運算&am…

zookeeper啟動后沒有相關進程

查看狀態報錯&#xff0c;報錯&#xff0c;百度碩士nc問題&#xff0c;讓看.out文件&#xff0c;但是這哥文件是空的&#xff0c;那就看log 016-12-15 14:08:19,355 [myid:] - INFO [main:QuorumPeer$QuorumServer149] - Resolved hostname: StandByNameNode to address: Stan…

html如何播放h264視頻,瀏覽器 – 我如何播放H264視頻?

嗯..從它的外觀看起來它不像H264文件..通過MediaInfo運行它,我得到了這個&#xff1a;VideoFormat : AVCFormat/Info : Advanced Video CodecFormat profile : BaselineL2.0Format settings, CABAC : NoFormat settings, ReFrames : 1 frameWidth : 352 pixelsHeight : 288 pix…

ebs r12 -- adadmin: error while loading shared libraries: libclntsh.so.10.1

安裝EBS R12.2增加中文字符集時&#xff0c;運行$AU_TOP/bin/adadmin出錯&#xff1a; $ adadmin adadmin: error while loading shared libraries: libclntsh.so.10.1: cannot open shared object file: No such file or directory產因是沒有配置應用管理用戶的環境變量。 對.…

kingedit 上傳php_php文件上傳下載實例(實現最簡單的網盤功能)

本人是一個新手代碼狗&#xff0c;第一次發表博客&#xff0c;歡迎大大們指點&#xff01;最近手頭有一個文件上傳下載的案例&#xff0c;跟大家一起分享一下作為一個新手的苦逼成長歷程&#xff01;話不多說&#xff0c;先上代碼:一&#xff1a;這個是一個文件上傳的html頁面&…

Perl 面對對象的案例理解

晚上仔細的推敲了下大駱駝的案例&#xff0c;由于有段時間沒繼續看下去了&#xff0c;導致有些地方忘記了。 今天仔細的翻了下面對對象那塊&#xff0c;說實話&#xff0c;認真看&#xff0c;用心看的話&#xff0c;就能看明白它寫神碼。 看完前面一堆的理論&#xff0c;發現一…

計算機發展與應用,網絡計算機的發展與應用

網絡計算機(Network Computer)&#xff0c;簡稱NC&#xff0c;是專用于高速網絡環境下的一種計算機終端設備。它一般不需要硬盤、軟驅及光驅等外部存儲器&#xff0c;而是通過網絡獲取大部分資源&#xff0c;其所需要的應用程序和數據都存儲在服務器上。NC與PC的比較隨著網絡技…

ASP.NET 緩存技術分析

緩存功能是大型網站設計一個很重要的部分。由數據庫驅動的Web應用程序&#xff0c;如果需要改善其性能&#xff0c;最好的方法是使用緩存功能。可能的情況下盡量使用緩 存&#xff0c;從內存中返回數據的速度始終比去數據庫查的速度快&#xff0c;因而可以大大提供應用程序的性…