1.class 和 id 的使用場景?
- class是將一類元素的樣式抽取出來,它可以管控多個元素的樣式;
- id是唯一的,控制單個元素的樣式
2.CSS選擇器常見的有幾種?
- 基礎選擇器
- 通配符選擇器
- id選擇器
- 類選擇器
- 標簽選擇器
- 組合選擇器
- 多元素選擇器:以','分隔,表示同時匹配多個選擇器對應的元素
- 后代選擇器:以空格分隔
- 屬性選擇器
- E[attr]:篩選出所有具有屬性名為attr的屬性的元素
- E[attr=value]:篩選出所有屬性attr的值為vlaue的元素
- 偽類選擇器
- E:first-child:父元素的各類標簽中第一個子元素且必須符合指定類型(為E)
- E:nth-child:匹配其父元素的第n個子元素
- E:enabled和E:disabled
- E:checked和E:selection
- E:link:未被訪問時的樣式
- E:visited:已經被訪問后的樣式
- E:hover:鼠標懸停在a鏈接之上的樣式
- E:active:鼠標按下但未釋放時的樣式
- 偽元素選擇器
- E:before:在E元素之前插入的內容
- E:after:在E元素之后插入的內容
3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級?
- 優先級:
- !important:在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 內聯樣式:style="..."
- ID選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的? 為什么?
正確的順序為a:link、a:visited、a:hover、a:active (其中,link和visited可以互換)
1.鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;
2.鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性,后面的屬性會覆蓋前面的屬性定義;
所以說,a:hover定義一定要放在a:link、a:visited的后面,
5.以下選擇器分別是什么意思?
#header{}
.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}
#header .nav>li{}
#header a:hover{}
#header .logo~p{}
#header input[type="text"]{}
- #header{}:匹配Id=header的元素
- .header{}:匹配類class=header的元素
- .header .logo{}:
匹配類為header元素的后代元素中類為logo的元素 - .header.mobile{}:
匹配類名包含header和mobile的元素,如class = 'beader mobile' - .header p, .header h3{}:
匹配兩個類型的元素(并集,‘或’關系),類型1是header類的后代p標簽,類型2是header類的后代h3標簽 - #header .nav>li{}:
匹配id為header的后代中,類名為nav的直接子元素中,的li標簽 - #header a:hover{}:
匹配id為header的后代a標簽在hover狀態(鼠標懸停其上)下的樣式 - #header .logo~p{}:
匹配id為header的后代中,類名為logo的元素之后的同級元素中,的p標簽 - #header input[type="text"]{}
id為header的后代中,input標簽中,屬性type的值為"text"的元素集合
6.列出你知道的偽類選擇器
- E:first-child:匹配元素E的第一個子元素
- E:nth-child:匹配元素E的第n個子元素
- E:enabled和E:disabled:匹配元素E的狀態為可用/不可用
- E:checked和E:selection:匹配元素E的狀態為單選框選中/復選框選中
- a:link:未被點擊的鏈接
- a:visited:已被點擊的鏈接
- a:hover:鼠標懸停其上的鏈接
- a:active:鼠標已經按下,但沒有釋放的鏈接
7.div:first-child和div:first-of-type的作用和區別
- div:first-child:父元素的第一個子元素且必須符合指定類型(為div)
- div:first-of-type:父元素中的第一個div元素
- 區別:如
<body>
<p>title</p>
<div>div1</div>
<div>div2</div>
</body>
1.div:first-child指定必須是第一個元素的div標簽,所以無效果
2.div:first-of-type指定第一個div標簽,所以是指div1所在的div標簽樣式
8.運行如下代碼,解析下輸出樣式的原因。
<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>
- .item1:first-child{ color: red;}
指定父元素中第一個類名為item1的元素的字體顏色為紅色
- .item1:first-of-type{ background: blue;}
父元素中每一類元素的第一個類名為item1的元素的背景色為藍色,
(即現將div中的子元素分為p、h3兩類標簽,每一類取第一個類名為item1的元素,最終:內容為aa的p標簽和內容為bb的h3標簽被選中)