1.CSS選擇器常見的有幾種?
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
1.課件
2.css選擇器參考資料
2.選擇器的優(yōu)先級是怎樣的?
!important > 作為style寫在元素上的內聯(lián)樣式的內聯(lián)樣式[<p style="border :1px; >xxx</p>] > id選擇器 > 類選擇器(class) >偽類選擇器(E:hover) > 屬性選擇器(input[type="button"]{})> 標簽選擇器(p{}) > 通配符選擇器(用*表示的) > 瀏覽器自定義
3.class 和 id 的使用場景?
構建大框架算墨,只用一次就用id
框架里的內容(公共樣式,或者細節(jié)),可以使用多次的用class
4.使用CSS選擇器時為什么要劃定適當的命名空間?
1.更具語義化,方便閱讀
2.當需要審查代碼時方便查閱這個類是什么俯萎,避免錯誤
5.以下選擇器分別是什么意思?
選擇器代碼.png
- (#header: id名為header的元素
- .header: class為header的元素
- .header .logo: class為header元素下的后代class為logo的元素
- .header.mobile :class為header和mobile的元素
- .header p , .header h3 class為header元素下的 p和h3的元素
- -#header .nav>li: id為header元素的后代中class為nav的子元素中名為li的元素
- -#header a:hover:id為header元素下的a元素的偽類
6.列出你知道的偽類選擇器
a:hover{}
a:active{}
a:link{}
a:visited{}
E:first-child{} 長子中的E元素(要匹配到first-child)
E:first of type{} 父元素下的第一個E元素
E::before在E元素之前插入生成的內容
E::after在E元素之后插入生成的內容
7.:first-child和:first-of-type的作用和區(qū)別
first-child 是父元素中的第一個子元素火俄,但是第一個元素一定要是所匹配的子元素巢墅,倘若不是就匹配不到
first-of-type 是父元素中的相同元素中的第一個子元素
8.運行如下代碼架谎,解析下輸出樣式的原因炸宵。
代碼
效果如下:
任務八 style的測試.png
aa為紅色是因為 .item1:first-child的意思是item1中的長子,也就是第一個子元素 所以為紅色
而aa 和bb為藍色框是因為 .item:first-of-type的意思是item1中的同類型類型的子元素谷扣,也就是p和h3都是他同類型的第一個元素
9.text-align: center的作用是什么土全,作用在什么元素上?能讓什么元素水平居中
意思是讓塊級元素內的行內元素水平居中会涎,作用在塊級元素上裹匙,因此只要在塊級元素的行內都能水平居中,如文本末秃,圖片