一二驰、CSS選擇器常見的有幾種?
- 標簽選擇器
- 屬性選擇器
- class選擇器
- id選擇器
- 偽類選擇器
- 后代選擇器&直接后代選擇器
- 分組選擇器
- 通配符選擇器
二、選擇器的優(yōu)先級是怎樣的?
優(yōu)先級從高到低：
- 在屬性后面添加!important
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
- class選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
三烙博、class 和 id 的使用場景?
- class：用于概念上相似的元素，可以出現(xiàn)在同一頁面上的多個位置匈织。CSS操作蜒灰，把一些特定樣式放到一個class類中，需要此樣式的標簽塞弊，可以在添加此類漱逸。在結(jié)構(gòu)內(nèi)部使用泪姨，通常用于樣式定義。
- id：具有唯一性饰抒，用于不同的唯一的元素肮砾，在結(jié)構(gòu)外圍使用，通常用于頁面布局袋坑。
四仗处、使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g？
- 使用語義化的命名便于閱讀
- 便于代碼的管理與多人協(xié)作
- 規(guī)范的命名有助于頁面渲染
五枣宫、以下選擇器分別是什么意思?
#header{} /*選中id屬性為header的元素*/
.header{} /*選中class屬性為header的元素*/
.header .logo{} /*選中class屬性為header的元素下的后代中class為logo的元素*/
.header.mobile{} /*選中class屬性同時為header和mobile的元素*/
.header p, .header h3{} /*選中class屬性為header的元素下的后代為p的元素 和 class屬性為header的元素下的后代為h3的元素*/
#header .nav>li{} /*選中id屬性為header的元素下的子元素class為nav的元素下的一級子元素為li的元素*/
#header a:hover{} /*選中id屬性為header的元素下的子元素a的hover偽類*/
六婆誓、列出你知道的偽類選擇器
- :first-child
- :last-child
- :hover
- :link
- :active
- :focus
- :visited
- :nth-child(n)
- :nth-of-type(n)
- :first-of-type
- :last-of-type
七、:first-child和:first-of-type的作用和區(qū)別
- :first-child 匹配的是某父元素的第一個子元素也颤，可以說是結(jié)構(gòu)上的第一個子元素洋幻。
- :first-of-type 匹配的是某父元素下相同類型子元素中的第一個，比如 p:first-of-type翅娶，就是指所有類型為p的子元素中的第一個文留。這里不再限制是第一個子元素了，只要是該類型元素的第一個就行了竭沫。
八燥翅、
代碼運行
-
.item1:first-child{color: red;}這個說明選中的child是結(jié)構(gòu)上第一個class為item1的，因此被選中的就只有內(nèi)容為aa的item1元素输吏，所以aa顯示紅色权旷； -
.item1:first-of-type{background: blue; }這個說明被選中的child是所有同類型的第一個class為item1的元素，因為p和h3是不同類型贯溅，所以會選擇不同類型的第一個拄氯，因此aa和bb的背景都為藍色；
九它浅、text-align: center的作用是什么译柏，作用在什么元素上？能讓什么元素水平居中
- 作用就是使文本水平居中姐霍，作用在塊級元素上
- 可讓文字鄙麦、圖片、a鏈接等行內(nèi)元素居中
