一胶果、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)站