CSS作業7

1.class 和 id 的使用場景?

  • class用于選擇同一類型的元素,id具有唯一性,一個id只能匹配一個元素

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

  • 基礎選擇器
T18A2CVBTUK4G1GSYIGFKDT.png
  • 組合選擇器
Paste_Image.png
  • 屬性選擇器
Paste_Image.png
  • 偽類選擇器
Paste_Image.png
  • 偽元素選擇器
Paste_Image.png

3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級?

** 優先級從高到低依次是 **

  • 1.左屬性后面使用!important會覆蓋頁面內任何位置定義的元素樣式
  • 2.作為style屬性寫在元素標簽上的內聯樣式
  • 3.id選擇器 #
  • 4.類選擇器 .class
  • 5.偽類選擇器 first-child
  • 6.屬性選擇器 p[XXX]
  • 7.標簽選擇器 p{}
  • 8.通配符選擇器 *
  • 9.瀏覽器選擇器
    ** 在復雜場景中優先級的計算是根據選擇器的優先級確定權重,同一級選擇器數量相同則比較下一級選擇器的數量;通俗點就像是皇帝納妾,先比長相氣質,再比心性性格,再比文才武略,凡是賢良淑德、德才兼備者方可進身為妃。 **

4.a:link, a:hover, a:active, a:visited 的順序是怎樣的? 為什么?

Paste_Image.png

正確順序為:
a:link
a:visited
a:hover
a:active
原因:
1.當選擇器優先級別相同時,后定義的會覆蓋先定義的
2.當鼠標經過未訪問鏈接,同時有link和hover屬性,由于后定義的覆蓋先定義的,所以hover在后面以此類推,當鼠標經過已訪問鏈接,同時有visited和hover屬性,由于后定義的覆蓋先定義的,所以hover在link和visited后面。

5.以下選擇器分別是什么意思?

Paste_Image.png
  • ** 列出你知道的偽類選擇器 **
    E:first-child 匹配元素E的第一個子元素
    E:link 匹配所有未被點擊的鏈接
    E:visited 匹配所有已被點擊的鏈接
    E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
    E:hover 匹配鼠標懸停其上的E元素
    E:enabled 匹配表單中可用的元素
    E:disabled 匹配表單中禁用的元素
    E:checked 匹配表單中被選中的radio或checkbox元素
    E::selection 匹配用戶當前選中的元素
    E:nth-child(n) 匹配其父元素的第n個子元素,第一個編號為1
    E:nth-last-child(n) 匹配其父元素的倒數第n個子元素,第一個編號為1
    E:nth-of-type(n) 與:nth-child()作用類似,但是僅匹配使用同種標簽的元素
    E:nth-last-of-type(n) 與:nth-last-child() 作用類似,但是僅匹配使用同種標簽的元素
    E:last-child 匹配父元素的最后一個子元素,等同于:nth-last-child(1)
    E:first-of-type 匹配父元素下使用同種標簽的第一個子元素,等同于:nth-of-type(1)
    E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素,等同于:nth-last-of-type(1)
    E:only-child 匹配父元素下僅有的一個子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
    E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    E:not(selector) 匹配不符合當前選擇器的任何元素

  • ** div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 (注意空格的作用) **
    div:first-child 匹配父元素下第一個子元素。

Paste_Image.png

div:first-of-type 是指匹配父元素下同種類型的第一個元素。

Paste_Image.png

div :first-child 選擇div的后代元素中的第一個子元素
div :first-of-type 選擇div的后代元素的同種類型的第一個元素

  • ** 運行如下代碼,解析下輸出樣式的原因。**
Paste_Image.png

** .item1:first-child ** 匹配class名為item1的第一個元素為紅色,所以p標簽aa為紅色。
** .item1:first-of-type ** 匹配class名為item1不同類型元素的第一個元素背景色為藍色,第一種類型p標簽aa背景色為藍色;第二種類型h3標簽bb背景色為藍色,而h3標簽cc為第二種類型的第二個子元素所以背景色不變。

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

推薦閱讀更多精彩內容

  • 1.class 和 id 的使用場景? 當頁面中某元素的樣式并不獨有,或與其他元素共用一個樣式時,可以為該元素指定...
    Feiyu_有貓病閱讀 955評論 0 0
  • 1.class 和 id 的使用場景? 兩者都能選取DOM節點并給DOM節點添加樣式,但是W3C標準里規定頁面中只...
    饑人谷_米彌輪閱讀 413評論 0 1
  • 1.class 和 id 的使用場景? 多個標簽可以使用同一個class,一個id只能對應一個標簽 2.CSS選擇...
    molly的紅草帽閱讀 371評論 0 0
  • 1.class 和 id 的使用場景? 類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用,也...
    草鞋弟閱讀 2,446評論 0 1
  • class 和 id 的使用場景? 每個標簽只能設置一個id,此id在頁面中只能出現一次。id多用于頁面分塊時塊級...
    cross_王閱讀 449評論 0 0