1.CSS選擇器常見的有幾種?

• id選擇器

• 類選擇器

• 屬性選擇器:以某個(gè)元素的屬性作為選擇依據(jù)
  input[type="text"] 用于調(diào)整輸入框的樣式
  input[type="button"] 用于調(diào)整按鈕的樣式

• 分組選擇器:可以對(duì)選擇器分組,相當(dāng)于同時(shí)選中兩個(gè)元素,用逗號(hào)隔開.
  h1, .p1{ color: red; } hi 和class=p1的類同時(shí)被選中.

• 派生選擇器:選擇某個(gè)元素下的子元素，通常用于作用域隔離分為兩種:
  h1 p1{} h1中的所p1標(biāo)簽
  h1>p1{} 選中p1 但不包括p1中的其他元素

• 偽類選擇器
  一般用于向選擇器添加特殊效果.
  先來說一下語法:
  E:pseudo-class {property:value}
  其中E為元素;pseudo-class為偽類名稱;property是css的屬性;value為css的屬性值
  其中,偽類一般應(yīng)用在兩個(gè)地方:

• 動(dòng)態(tài)偽類:因?yàn)檫@些偽類并不存在于HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來，分為兩種
  1 錨點(diǎn)

   demo a:link {color:gray;}  鏈接沒有被訪問時(shí)前景色為灰色
   demo a:visited{color:yellow;}  鏈接被訪問過后前景色為黃色  
   demo a:hover{color:green;}  鼠標(biāo)懸浮在鏈接上時(shí)前景色為綠
   demo a:active{color:blue;}  鼠標(biāo)點(diǎn)中激活鏈接那一下前景色為藍(lán)色  
  

2 用戶行為偽類
:hover用于當(dāng)用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果；
:active用于用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下，松開鼠標(biāo)左鍵此動(dòng)作也就完成了）
:focus**用于元素成為焦點(diǎn)，這個(gè)經(jīng)常用在表單元素上。

• UI元素狀態(tài)偽類:這些主要是針對(duì)于HTML中的Form元素操作.
  input[type="text"]:disabled{} 作用在于對(duì)想要禁止的輸入框添加其他效果便于區(qū)別
  input[type="radio"]:checked 表示頁面上所有選中的radio按鈕

2.選擇器的優(yōu)先級(jí)是怎樣的?

優(yōu)先級(jí)就是分配給指定的CSS聲明的一個(gè)權(quán)重，它由 匹配的選擇器中的 每一種選擇器類型的 數(shù)值 決定。而當(dāng)優(yōu)先級(jí)與多個(gè)CSS聲明中任意一個(gè)聲明的優(yōu)先級(jí)相等的時(shí)候，CSS中最后的那個(gè)聲明將會(huì)被應(yīng)用到元素上。當(dāng)同一個(gè)元素有多個(gè)聲明的時(shí)候，優(yōu)先級(jí)才會(huì)有意義。因?yàn)槊恳粋€(gè)直接作用于元素的CSS規(guī)則總是會(huì)接管/覆蓋（take over）該元素從祖先元素繼承而來的規(guī)則。
優(yōu)先級(jí)強(qiáng)度由高到低:
!important規(guī)則>元素的內(nèi)聯(lián)樣式<style="">>ID選擇器>類選擇器,屬性選擇器,偽類選擇器>元素類型選擇器,偽元素選擇器.
注意!

• 通用選擇器）(*), 和 否定偽類:not() 不會(huì)影響優(yōu)先級(jí)（但是，在:not()內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)的）
• 怎樣覆蓋 !important?只需再添加一條 帶!important 的CSS規(guī)則，要么給這個(gè)給選擇器更高的優(yōu)先級(jí)（添加一個(gè)標(biāo)簽，ID或類）；或是添加一樣選擇器，把它的位置放在原有聲明的后面（總之，最后定義一條規(guī)則比勝）
• 一個(gè)基本原則,誰越具體誰起作用;同一級(jí)誰舉例元素最近,誰起作用.

3.class 和 id 的使用場景?

id一般用于構(gòu)建頁面的框架,同時(shí)大多數(shù)情況是開放給后端人員用于使用的;而calss用來給我結(jié)構(gòu)中的內(nèi)容添加樣式.

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

通常，一個(gè)項(xiàng)目我們只引用一個(gè)CSS，但是對(duì)于較大的項(xiàng)目，我們需要把CSS文件進(jìn)行分類。我們按照CSS的性質(zhì)和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”.
一般在選擇器的名稱以一個(gè)功能單詞的首字母+下劃線+ 內(nèi)容的介紹 來組合選擇器的名稱.
提供一個(gè)不錯(cuò)的鏈接以供繼續(xù)學(xué)習(xí) 網(wǎng)易nec css

5.以下選擇器分別是什么意思?

#header{} 選中id=header的元素
.header{} 選中class=header的元素
.header .logo{}  header和logo中的元素
.header.mobile{}  header中的mobile的元素
.header p, .header h3{} 選中header中的p和h3元素
#header .nav>li{}  header類中的nav標(biāo)簽里面的li元素(不包含li內(nèi)部元素)
#header a:hover{} header中的a元素添加用戶行為偽類

6.列出你知道的偽類選擇器

css2部分詳見第一題答案.
css3中介紹兩個(gè)相似的偽類選擇器:

 :first-child  父級(jí)中的第一個(gè)元素是...才選中
 :first-of-type  父級(jí)中的某個(gè)元素的第一個(gè)...

舉例說明:

任務(wù)8.png

7.:first-child和:first-of-type的作用和區(qū)別?

見第六題!

8.運(yùn)行如下代碼，解析下輸出樣式的原因。

任務(wù)8-2.png

8.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?

作用在塊級(jí)區(qū)域中使內(nèi)部的行內(nèi)元素居中.一般結(jié)合display:inline-block 來使元素居中.

9.如果遇到一個(gè)屬性想知道兼容性，在哪查看?

caniuse

:nth-child(n)
p:nth-child(2)
選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。

Paste_Image.png