標籤：參與 沒有 獲得 兩種 優點 作用 選取器 內容 規範
一、CSS常用選取器前言：頁面中，所有的CSS代碼，需要寫入到<style></style>標籤中。
style標籤的type屬性應該選擇"text/css"，但是type屬性可以省略。
CSS修改頁面中的所有標籤，必須藉助選取器選中。
選取器中，可以寫多對CSS屬性，用{}包裹。每個屬性名稱與屬性值之間用:分隔，多對屬性之間，必須用;分隔。
寫法：
選取器{
屬性1:屬性值1;
}
(1)通用選取器： 1. 寫法：*{ } 2.作用：選中頁面中的所有標籤 3.優先順序：最低(2)標籤選取器： 1.寫法：標籤名{ } 2.作用：根據選取器名 稱，選中頁面中的所有html標籤。(3)類別選取器：(class選取器): 1. 寫法：.class名（注意：一定不能忘記前面的點.） 調用：在html標籤中，使用class="class名"調用選取器。 2.優先順序：class選取器>標籤選取器(4)ID選取器： 1. 寫法：#ID名{ } 調用：在html標籤中，使用id="id名"調用選取器。 2.優先順序：id選取器大於class選取器(5)交集選取器: 1. 寫法：選取器1選取器2選取器3……{ } 多個選取器之間緊挨著，沒有任何分隔； 2. 作用效果：一個標籤要滿足交集選取器，則必須滿足交集選取器中出現的所有選取器；(6)並集選取器 1. 寫法：選取器1，選取器2，……選取器N{}。多個選取器之間用逗號分隔。 2. 生效規則：只要滿足並集選取器中的一個，即可生效。(7)後代選取器 1. 寫法：選取器1選取器2……選取器N{}。選取器之間用空格分隔 2.生效規則：必須滿足，後一個選取器，是前一個選取器的後代（子代、孫代、），才會生效。(8)子代選取器 1.寫法：選取器1>選取器2>……選取器N{}。選取器之間用>分隔 2.生效規則：必須滿足，後一個選取器，是前一個選取器的直接子代才會生效。隔代，即中間包含其他標籤，則不會生效。(9)偽類別選取器（後續講解）二、CSS匯入方式和優先順序【選取器的注意事項】1 .id選取器與class選取器的區別？ ①寫法不同：class選取器使用.聲明，而ID選取器使用#聲明。 ②優先順序不同：當作用於同一標籤時，id選取器高於class選取器 ③在同一HTML檔案中，ID是唯一的，所以ID選取器只能作用於一個標籤上，但是，class選取器可以作用於N個標籤。2.選取器的命名規則： 只能有：字母、數字、底線、減號組成。開頭不能是數字。3.選取器的優先順序排序： ①首先遵循近者優先原則。哪個選取器，作用於最裡層標籤，則哪個選取器生效。 ②當作用於同一層標籤時，優先順序排序如下： id選取器大於class選取器大於標籤選取器大於通用選取器。【選取器的優先順序】1.第一原則： 近者優先。作用於最裡層的選取器生效。2.當作用於同一層時： 每種選取器所佔優先順序，可以進行運算獲得： 標籤選取器占權重1 class選取器占權重10 id選取器占權重100 行級樣式表style=""占權重1000 注意：只有交集、後代、子代選取器，才參與優先順序的累加！！而，並集選取器相當於寫了兩個選取器，沒有總優先順序。3.如果計算出的優先順序權重完全相同，則後寫的選取器生效。【引入CSS的三種方式】 1、行級樣式表：在HTML標籤中，使用style=""的形式引用； <div style="height:100px"></div> 優點：使用靈活，優先順序權重最高。 缺點：不符合W3c關於內容和表現分離的要求。不利於樣式複用。代碼雜亂，不利於後期維護。 2、內部樣式表：在head標籤中，使用style標籤包裹CSS代碼。 特點：一定程度的實現了HTML與CSS的分離，但是分離不夠徹底，沒有辦法多頁面公用樣式。 <head> <style type="text/css"> <style/> </head> 3、外部樣式表：將CSS代碼,全部寫到一個CSS檔案中，使用link標籤，將html檔案與css檔案關聯。 rel:選擇stylesheet type選擇"text/css"，可以省略。 href選擇CSS檔案地址。 <link rel="stylesheet" type="text/css" href="css/01-css.css"/> 優點：徹底實現CSS與HTML的分離，符合W3C規範，有利於多頁面複用統一樣式。[匯入CSS檔案的兩種方式] ①在<head>標籤中，使用link連結： <link rel="stylesheet" type="text/css" href="css/01-css.css"/> ②在style標籤中，使用@import匯入； @import url("css/01-css.css");【兩種匯入方式的區別】 ①link術語標準的HTML標籤，而@import url不是標準的標籤； ②link可以相容所有低版本的瀏覽器，而@import url只在CSS2之後可用； ③link是將兩個檔案連結起來，起橋樑作用，而@import相當於將CSS檔案複製到HTML檔案中； ④link會在HTML檔案邊載入的過程當中，邊載入CSS檔案；@import會在HTML檔案載入完之後，再匯入CSS檔案； 綜上所述，我們使用link串連的方式載入CSS檔案.CSS基礎文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
