1.class和id的使用場景
class是用于給元素分類都许，可以重復(fù)褂萧；而id是唯一的押桃，一個id只能給一個元素，不能重復(fù)箱玷。
2.CSS選擇器常見的有幾種怨规。
css語法由兩個個主要的部分構(gòu)成：選擇器，以及一條或多條聲明锡足。
選擇器通常是需要改變樣式的HTML元素波丰。
每條聲明由一個屬性和一個值組成。屬性和值被冒號+空格隔開舶得。
h1 {color： red; font-size: 14px; }
1.基礎(chǔ)選擇器
* 通配符選擇器
#id id選擇器
tips：id選擇器常常用于建立派生選擇器掰烟。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式只會出現(xiàn)在id 是sidebar的元素內(nèi)的p標(biāo)簽上。這個元素可能是div或者是一個表格
.class 類選擇器
tips:類選擇器的第一個字符不能使用數(shù)字沐批！他無法在fireflx中起作用纫骑。
.fancy td {
color: #f60;
background: #666;
}這是與is選擇器用法一樣的類選擇器，樣式作用于fancy這個元素下的td標(biāo)簽上九孩，其他標(biāo)簽不受影響先馆。
td.fancy {
color: #f60;
background: #666;
}這個樣式僅作用于類名為fancy的td元素上，而有相同類名的其他元素卻不受該規(guī)則限制躺彬。（用td元素來選擇fancy類）
例如：p {color:gray;}
組合選擇器
E,F
E F
tips：有“煤墙，”的是多元素選擇器，只有空格的是后代選擇器宪拥。
E>F
tips：E元素下的所有直接子元素F仿野。
tips：空格與>的區(qū)別是。無論嵌套多少層后代選擇器都可以直接對自己內(nèi)部的直接或多層進(jìn)行樣式的控制她君；而子元素選擇器是不能控制直接子元素下嵌套的孫元素的脚作。。缔刹。
E+F
tips:匹配E元素之后的相鄰的同級元素F
E~F
tips：匹配E元素之后的同級元素F（無論是否直接相鄰只要是元素F球涛，但必須是同級）
element.class/p.class
tips：必須滿足同時擁有，才能被這個樣式規(guī)則控制校镐。
tips:id選擇亿扁，class選擇器，屬性選擇器連寫的時候中間沒有分隔符灭翔，“，”和“#”本身充當(dāng)分隔符
屬性選擇器
E[attr] 匹配所有具有屬性attr的元素
E[attr=value] 匹配屬性值僅為value的元素
E[attr～=value] 適用于由空格分隔的屬性值
E[attr^=value] 匹配屬性atr的值以value開頭的元素
E[attr$=value] 匹配屬性atr的值以value結(jié)尾的元素
E[attr*=value] 匹配屬性atr的值包含value的元素
偽類選擇器
E:first-child 匹配元素E的第一個子元素。
E:lang（c）匹配lang屬性等于c的元素
a鏈接中的：
a:link 匹配所有未被點(diǎn)擊的鏈接 a:hover 匹配所有懸停其上的元素 a:active 匹配鼠標(biāo)已經(jīng)騎上按下,還沒有釋放的元素 a:visited 匹配所有已被點(diǎn)擊過的鏈接 tips：權(quán)重從下往上依次加重肝箱，隨著操作的進(jìn)行樣式依次覆蓋哄褒。
表單中的：
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素 E:enabled 匹配表單中可用的元素 E:disabled 匹配表單中禁用的元素 E:checked 匹配表單中被選中的radio或checkbocx元素 E::selection 匹配用戶當(dāng)前選中的元素
偽元素選擇器
E:before：在E元素之前插入的內(nèi)容 E:after：在E元素之后插入的內(nèi)容
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
!important：在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
內(nèi)聯(lián)樣式：style="..."
ID選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
一般而言煌张，選擇器越特殊呐赡，它的優(yōu)先級越高。也就是選擇器指向的越準(zhǔn)確骏融，它的優(yōu)先級就越高链嘀。
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么档玻？
權(quán)重順序依次增大怀泊。因?yàn)闉g覽器是按照就近原則來解釋的，也就是從下到上误趴。
在CSS中霹琼，如果對于相同元素有針對不同條件的定義，宜將最一般的條件放在最上面凉当，并依次向下枣申，保證最下面的是最特殊的條件】春迹“愛恨原則”（LoVe/HAte）忠藤，即四種偽類的首字母:LVHA。即a:link楼雹、a:visited模孩、a:hover、a:active
5.以下選擇器分別是什么意思?
#header{
}選擇id為header的元素
.header{
}選擇類為header的所有元素
.header .logo{
}選擇類名里既有header又有l(wèi)ogo的
.header.mobile{
}選擇類名里既有header又有mobile的
.header p, .header h3{
}選擇所有類名為header下的p后代與h3后代共用樣式烘豹。
#header .nav>li{
}選擇id為header下類名為nav的元素的直接子元素瓜贾。
#header a:hover{
}選擇id為header的a鏈接鼠標(biāo)放上去時候的狀態(tài)
#header .logo~p{
}選擇id 為header元素下的類名為logo的元素后的所有相鄰的p元素。
#header input[type="text"]{
}選擇id為header元素下type屬性值為text的input元素携悯。
6.div:first-child和div:first-of-type的作用和區(qū)別
:first-child 匹配的是某父元素的第一個子元素祭芦，可以說是結(jié)構(gòu)上的第一個子元素。
:first-of-type 匹配的是某父元素下相同類型子元素中的第一個
tips：
nth-child(n)匹配其父元素的地n個子元素憔鬼，選擇幾龟劲，括號內(nèi)就寫幾
nth-of-type(n)同理。
7.輸出樣式的原因
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child{color: red;}
這是指定所有元素中第一個類名為item的元素的字體顏色為紅色轴或。
.item1:first-of-type{background: blue;}
為每一類元素中第一個類名為item的元素添加藍(lán)色背景昌跌。
