任務(wù)八問(wèn)答題

一胶果、CSS選擇器常見(jiàn)的有幾種?

id選擇器:獨(dú)一無(wú)二的匾嘱,劃分大區(qū)塊 #div{border:1px solid red;}

class選擇器:同一類(lèi)型的區(qū)塊,小區(qū)塊class=“intro other other2”

標(biāo)簽選擇器:不常用早抠,范圍太大霎烙。去除默認(rèn)樣式,用標(biāo)簽選擇器。標(biāo)簽選擇器的使用常見(jiàn)的有:a{text-decoration:none},li{display:none}蕊连,其他一般不用

通用元素選擇器悬垃,一般使用規(guī)則為*{padding:0;magrgin:0;}

屬性選擇器 input[type="text"]用中括號(hào)表示

分組選擇器用,逗號(hào)隔開(kāi)甘苍。如h1,p{}是表示h1和p用同一樣式

派生選擇器(子元素選擇器尝蠕,自己的后代,并不是直接子元素):選擇某個(gè)元素的子元素.中間用空格隔開(kāi) ?.box h1{}表示box類(lèi)下的所有h1都會(huì)改變,box類(lèi)之外的不影響

.box h1(中間是空格)羊赵。只選擇box里面的h1趟佃,其他的h1沒(méi)有影響

直接子元素選擇器.box > h1是.box下的直接子元素,即跟h1在同一層級(jí)昧捷,沒(méi)有被其他的div 或其他嵌套的h1

.box#footer選擇的是類(lèi)為boxid且id為footer,同時(shí)存在的

h1.class1標(biāo)簽選擇和類(lèi)選擇同時(shí)滿足時(shí)罐寨,才會(huì)進(jìn)行相應(yīng)樣式修改

h1 .class1后代選擇器靡挥,表示h1下的類(lèi)class1

偽類(lèi)選擇器,最多 ?使用的是a:hover{}

二鸯绿、選擇器的優(yōu)先級(jí)是怎樣的?

優(yōu)先級(jí)從上到下依次更低級(jí)

1跋破、在屬性后面加上!important的優(yōu)先級(jí)最高

2簸淀、作為style屬性寫(xiě)在元素內(nèi)部的行內(nèi)樣式

3、id選擇器

4毒返、類(lèi)選擇器

5租幕、偽類(lèi)選擇器

6、屬性選擇器

7拧簸、標(biāo)簽選擇器

8劲绪、通配符選擇器

9、瀏覽器自定義

如果是兩個(gè)或者多個(gè)的話(除行業(yè)樣式外盆赤,行內(nèi)樣式權(quán)重太高為1000)贾富,ID選擇器100,類(lèi)牺六、偽類(lèi)和屬性選擇器10颤枪,標(biāo)簽和偽元素選擇器1,進(jìn)行相加淑际,得到的數(shù)值越大畏纲,權(quán)重越大



三、class 和 id 的使用場(chǎng)景?

1春缕、一個(gè)標(biāo)簽只能有一個(gè)id.一個(gè)id只能使用一次(類(lèi)似于一個(gè)人只有一個(gè)身份證盗胀,一個(gè)身份證只能讓一個(gè)人使用),而且一個(gè)標(biāo)簽可以有多個(gè)類(lèi)<div class="box1 box2"/>淡溯,一個(gè)類(lèi)也可以用再多個(gè)標(biāo)簽上?

2读整、當(dāng)有幾個(gè)元素有共同屬性時(shí),用class咱娶,獨(dú)一無(wú)二的屬性時(shí)米间,用id.一般情況下,大的層一般用id,里面的小塊樣式一樣時(shí)膘侮,一般用class.

四屈糊、使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g?

1琼了、使代碼頁(yè)面更具有語(yǔ)義化逻锐,增加可讀性

2、方便后期代碼維護(hù)的修改完善.?

五雕薪、以下選擇器分別是什么意思?

#header{} ?名為header的id選擇器昧诱,引用時(shí)id="header"

.header{}? 名為header的類(lèi)選擇器 ,引用時(shí)為class="header"

.header .logo{}? 后代選擇器,名為header的類(lèi)選擇器下的名為logo的類(lèi)選擇器 引用時(shí)類(lèi)似為<div class="header"><div class="logo"></div></div>

.header.mobile{} 名為header的類(lèi)選擇器同時(shí)名為mobile的id選擇器 引用時(shí)為class="header mobile"

.header p, .header h3{}大塊為分組選擇器所袁,名為header的類(lèi)選擇器的后代p標(biāo)簽和header類(lèi)名后代是我h3標(biāo)簽共同具有的屬性

#header .nav>li{}后代的直接子元素選擇器盏档,為header的id選擇器的后代名為nav的類(lèi)選擇器的直接子元素li標(biāo)簽屬性

#header a:hover{}名為header的ID選擇器的后代a標(biāo)簽的鼠標(biāo)放上的屬性

六、列出你知道的偽類(lèi)選擇器

cursor鼠標(biāo)燥爷,屬性有pointer(手型)蜈亩、copy(豎線)

hover

active

focus(表單懦窘,輸入框,默認(rèn)樣式去除)

before

after

七稚配、:first-child和:first-of-type的作用和區(qū)別

:nth-of-type(3)第3個(gè)元素

:nth-child(3)第三個(gè)孩子

.box > h1 :nth-of-type(3).box下面的第三個(gè)h1畅涂,不是h1的忽略,繼續(xù)找

.box > h1 :nth-child(3)看.box下面的第三個(gè)孩子是不是h1如果是的華進(jìn)行樣式修改道川,不是就無(wú)作用

first-child:父元素中的第一個(gè)子元素

first-of-type:父元素的子元素中每個(gè)類(lèi)型(即每一種標(biāo)簽或者第一個(gè)內(nèi)容午衰,比如沒(méi)有標(biāo)簽包括,直接是元時(shí)愤惰,也是第一個(gè)出現(xiàn)的不同的值)第一個(gè)出現(xiàn)的元素

八苇经、運(yùn)行如下代碼,解析下輸出樣式的原因宦言。


九扇单、text-align: center的作用是什么,作用在什么元素上奠旺?能讓什么元素水平居中

text-align:center是水平居中蜘澜。作用在塊級(jí)元素上,代碼寫(xiě)在塊級(jí)元素上响疚,使該塊級(jí)元素包括的行業(yè)元素水平居中鄙信,

十、如果遇到一個(gè)屬性想知道兼容性忿晕,在哪查看?

can i use 網(wǎng)站

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末装诡,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子践盼,更是在濱河造成了極大的恐慌鸦采,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咕幻,死亡現(xiàn)場(chǎng)離奇詭異渔伯,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)肄程,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)锣吼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人蓝厌,你說(shuō)我怎么就攤上這事玄叠。” “怎么了拓提?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵诸典,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我崎苗,道長(zhǎng)狐粱,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任胆数,我火速辦了婚禮肌蜻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘必尼。我一直安慰自己蒋搜,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布判莉。 她就那樣靜靜地躺著豆挽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪券盅。 梳的紋絲不亂的頭發(fā)上帮哈,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音锰镀,去河邊找鬼娘侍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛泳炉,可吹牛的內(nèi)容都是我干的憾筏。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼花鹅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼氧腰!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起刨肃,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤古拴,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后之景,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體斤富,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年锻狗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了满力。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡轻纪,死狀恐怖油额,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情刻帚,我是刑警寧澤潦嘶,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站崇众,受9級(jí)特大地震影響掂僵,放射性物質(zhì)發(fā)生泄漏航厚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一锰蓬、第九天 我趴在偏房一處隱蔽的房頂上張望幔睬。 院中可真熱鬧,春花似錦芹扭、人聲如沸麻顶。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)辅肾。三九已至,卻和暖如春轮锥,著一層夾襖步出監(jiān)牢的瞬間矫钓,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工交胚, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留份汗,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓蝴簇,卻偏偏與公主長(zhǎng)得像杯活,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子熬词,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案旁钧? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)互拾,斷路器歪今,智...
    卡卡羅2017閱讀 134,651評(píng)論 18 139
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,548評(píng)論 32 459
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器(重要!Q湛蟆<男伞)繼承、特殊性骑疆、層疊田篇、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,075評(píng)論 0 40
  • 意大利的兩位刑法學(xué)犯罪學(xué)大咖都是不到三十歲遍形成了自己的學(xué)術(shù)思想,太牛掰了箍铭! 所以泊柬,搞那么多爛文章干嘛,還得真才實(shí)...
    專(zhuān)注的喵星人閱讀 193評(píng)論 0 0