任務8-CSS選擇器

weixin_33860722發表於2016-08-07

一、CSS選擇器常見的有幾種?

1.元素選擇器 h1{color:red;},p{color:blue;};
2.分組選擇器 h1,h2,h3,p{color:red;};
3.class選擇器 .new{background:#ccc;};
4.id選擇器 #new{background:red;};
5.屬性選擇器 a[href] {color:red;}；
6.後代選擇器：div p{font-size:16px;}
7.直接子元素選擇器：div>p{font-size:16px;}（父元素下面的第一個子元素）；
8.相鄰元素選擇器：li+li{font-weight:bold;}(同級相鄰元素)；
9.偽類選擇器：

a:hover{color:red}當滑鼠懸浮在元素上方時，向元素新增樣式；
a:first-child{color:red}向元素的第一個子元素新增樣式；

10.CSS3新新增的選擇器：

:first of type 從一組中選擇第一個元素新增樣式；
:last of type 從一組中選擇最後一個元素新增樣式；

二、選擇器的優先順序是怎樣的?

排名：
1.在樣式裡面定義！important優先順序最高；
2.id選擇器；
3.class選擇器；
4.偽類選擇器；
5.屬性選擇器；
6.元素選擇器；

三、class 和 id 的使用場景?

1.id適用於整體區域大區塊的佈局，一個id只能使用一次；
2.class適用於區塊內部的小部分佈局，樣式的設定，可以重複使用；

四、使用CSS選擇器時為什麼要劃定適當的名稱空間？

1.保證程式碼的可讀性和易維護；
2.符合語義化；

五、以下選擇器分別是什麼意思?

1、#header{} 元素命名為header的佈局樣式；
2、.header{} 元素為類名header的佈局樣式；
3、.header .logo{} 類名為header元素下面的子元素class=logo的樣式；
4、.header .mobile{} 類名為header元素下面的子元素class=mobile的樣式；
5、.header p, .header h3{} 類名為header元素下面的子元素p和h3的樣式；
6、#header .nav>li{} 元素命名為header下面的子元素class=nav下面的第一個子元素li的樣式；
7、#header a:hover{} 當滑鼠懸浮在命名為header的元素下面時子元素a的樣式；

六、列出你知道的偽類選擇器

:active 向被啟用元素新增樣式；
:focus 向擁有鍵盤輸入焦點的元素新增樣式；
:hover 當滑鼠懸浮在元素上方時，向元素新增樣式；
:link 向未被訪問的連結新增樣式；
:visited 向已被訪問的連結新增樣式；
:first-child 向元素的第一個子元素新增樣式；
:lang 向帶有指定 lang 屬性的元素新增樣式；
:first of type 從一組中選擇第一個元素新增樣式；
:last of type 從一組中選擇最後一個元素新增樣式；

七、:first-child和:first-of-type的作用和區別

1.作用：

示例

p:first-child 匹配到的是p元素,因為p元素是div的第一個子元素；
h1:first-child 匹配不到任何元素，因為在這裡h1是div的第二個子元素，而不是第一個；
span:first-child 匹配不到任何元素，因為在這裡兩個span元素都不是 -div的第一個子元素；

示例

p:first-of-type 匹配到的是p元素,因為p是div的所有型別為p的子元素中的第一個；
h1:first-of-type 匹配到的是h1元素，因為h1是div的所有型別為h1的子元素中的第一個；
span:first-of-type 匹配到的是第三個子元素span。這裡div有兩個為span的子元素，匹配到的是它們中的第一個。

2.區別

:first-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素；
:first-of-type 匹配的是某父元素下相同型別子元素中的第一個，比如 p:first-of-type，就是指所有型別為p的子元素中的第一個。這裡不再限制是第一個子元素了，只要是該型別元素的第一個就行了；

ps：答案引用部落格園的一篇文章，簡單好理解。