Class 和 id 的使用場景?
- class: 用于多個元素的共同樣式
- id: 選擇唯一的元素的樣式
CSS選擇器常見的有幾種?
| 選擇器 | 功能 |
|---|---|
| * | 通用元素選擇器虱颗，匹配頁面任何元素 |
| #id | id選擇器，匹配特定的id的元素 |
| .class | 類選擇器，匹配class屬性中包含特定類的元素 |
| element | 標簽選擇器 |
| P>C | 組合選擇器亚茬，子元素選擇器称勋，匹配P元素的所有子元素中為C的元素 |
| E[attr] | 屬性選擇器才避，匹配所有具有屬性attr的元素 |
| E::before | 偽元素選擇器春哨，在E元素之前插入生成的內(nèi)容 |
| E:first-child | 偽類選擇器腰吟， 匹配父元素的第一個子元素 |
選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級汰聋？
- 從高到低
- 在屬性后面使用!import會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符 ( * ) 選擇器
- 瀏覽器自定義
-
復雜場景計算優(yōu)先級
劃分成四類门粪，根據(jù)abcd的數(shù)量來計算優(yōu)先級。優(yōu)先選擇包含a數(shù)量最多的那個烹困，若a數(shù)量相同玄妈，則選擇b數(shù)量最多，以此類推髓梅。
- 行內(nèi)樣式 --> a
- id 選擇器 --> b
- 類拟蜻、偽類選擇器 、屬性選擇器 --> c
- 標簽選擇器枯饿、偽元素選擇器 --> d
a:link, a:hover, a:active, a:visited 的順序是怎樣的酝锅？ 為什么？
建議順序為：
a:link { /*未被點擊*/
color: #000;
}
a:visited { /*已被點擊*/
color: #CCC;
}
a:hover { /*鼠標在鏈接上*/
color: #0FF;
}
a:active { /*鼠標按下奢方，但還沒有釋放*/
color: #FFF;
}
CSS后面生效的會覆蓋前面的屈张。因此為了保證能顯示出 hover 和 active 的效果，要把這兩個放在后面袱巨，active 要在 hover 后面阁谆。
以下選擇器分別是什么意思?
#header{ /*id選擇器，匹配id值為header的元素*/
}
.header{ /*class選擇器愉老，匹配所有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元素后代中.nav元素中的直接后代li
*/
}
#header a:hover{ /*匹配id值為header元素后代中的a元素指定鼠標移動到其上方的樣式 */
}
#header .logo~p{ /*匹配id值為header的元素后代中.logo元素之后的同級p元素*/
}
#header input[type="text"]{/*匹配id值為header的元素后代中 type 屬性為 text 的input元素*/
}
列出你知道的偽類選擇器
- E:first-child : 匹配父元素的第一個子元素且元素為E
- E:nth-child(n) : 匹配父元素的第n個子元素且元素為E
- E:nth-last-child(n) : 匹配父元素的倒數(shù)第n個子元素且元素為E场绿。
- E:nth-of-type(n) : 匹配父元素的第n個使用E標簽的元素。
div:first-child和div:first-of-type的作用和區(qū)別
div:first-child: 匹配父元素下的第一個子元素嫉入，且標簽為div焰盗。
div:first-of-type: 匹配父元素下的第一個標簽為div的元素璧尸。
運行如下代碼，解析下輸出樣式的原因熬拒。
<style>
.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>
Paste_Image.png
.item1:first-child{ color: red;} : 匹配父元素的第一個子元素并且該元素的 class 為 item1爷光。<p class="item1">aa</p> 符合匹配。aa 字體為紅色澎粟。
.item1:first-of-type{ background: blue;} 匹配父元素下的同種標簽的第一個且該元素的 class 為 item1蛀序。<p class="item1">aa</p>和 <h3 class="item1">bb</h3>符合匹配。背景為藍色活烙。
