任務7-CSS選擇器

1.class 和 id 的使用場景?

  • class是將一類元素的樣式抽取出來,它可以管控多個元素的樣式;
  • id是唯一的,控制單個元素的樣式

2.CSS選擇器常見的有幾種?

  • 基礎選擇器
    1. 通配符選擇器
    2. id選擇器
    3. 類選擇器
    4. 標簽選擇器
  • 組合選擇器
    • 多元素選擇器:以','分隔,表示同時匹配多個選擇器對應的元素
    • 后代選擇器:以空格分隔
  • 屬性選擇器
    • 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.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級?

  • 優先級:
  1. !important:在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
  2. 內聯樣式:style="..."
  3. ID選擇器
  4. 類選擇器
  5. 偽類選擇器
  6. 屬性選擇器
  7. 標簽選擇器
  8. 通配符選擇器
  9. 瀏覽器自定義

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"]{}
  1. #header{}:匹配Id=header的元素
  2. .header{}:匹配類class=header的元素
  3. .header .logo{}:
    匹配類為header元素的后代元素中類為logo的元素
  4. .header.mobile{}:
    匹配類名包含header和mobile的元素,如class = 'beader mobile'
  5. .header p, .header h3{}:
    匹配兩個類型的元素(并集,‘或’關系),類型1是header類的后代p標簽,類型2是header類的后代h3標簽
  6. #header .nav>li{}:
    匹配id為header的后代中,類名為nav的直接子元素中,的li標簽
  7. #header a:hover{}:
    匹配id為header的后代a標簽在hover狀態(鼠標懸停其上)下的樣式
  8. #header .logo~p{}:
    匹配id為header的后代中,類名為logo的元素之后的同級元素中,的p標簽
  9. #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標簽被選中)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容