資訊專欄INFORMATION COLUMN
摘要：當兩個規則的權值相同時，誰更具體用誰，也就是權值高的選擇器作用的越具體優先級越高。
CSS選擇器
1.id選擇器 #id{ } ,“#id”選中元素
2.類選擇器 .class{ } ,“.類名稱”選中元素
3.標簽選擇器 div{ } ,“標簽名”選中元素
4.通配符選擇器 { } ,""選中所有元素
5.組合選擇器：
分組選擇器 E,F “，”逗號隔開，同時選中E,F元素
后代選擇器 E F 空格隔開，選中E元素下的所有F元素（無論F元素嵌套多少層一樣會被選中）
直接子選擇器 E > F “>”隔開，選中E元素下的直接子元素F，即E元素下的第一層級子元素F
相鄰兄弟選擇器 E + F, “+”隔開選中E元素后的直接相鄰元素F
通用相鄰選擇器 E ~ F, “~”隔開選中E元素后面的所有同級元素F
6.偽類選擇器L-V-H-A,:link,:visited,:hover,:active
7.偽元素選擇器
E::first-line 選中E元素內容的第一行
E::first-letter 選中E元素內容的第一個字母
E::before 在E元素之前插入conten內容
E::after 在E元素之后插入content內容
before和after是可以插入額外內容的位置，需要配合content屬性使用
8.屬性選擇器
input[type="text"] {
width:150px;
}
css選擇器優先級核心：每個選擇器本身有優先級，作用范圍越具體優先級越高。
CSS優先級從高到低分別是：
1.在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素標簽上的內聯樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義
當CSS樣式的規則由多個選擇器組成時，id選擇器的權值為1000，class選擇器為100，標簽選擇器為10，按權值求和的記過高低決定哪個優先。當兩個css規則的權值相同時，誰更具體用誰，也就是權值高的選擇器作用的越具體優先級越高。當兩個選擇器規則和權值都是一樣，后面樣式會覆蓋前面的！
div {color: #333;}
div {color: #666;}
這樣div文案的顏色明顯會是#666
id在頁面上是唯一標識，class在頁面上標識某一類型的樣式，具有普遍性，可以重復使用。某元素的class名可以寫成class="intro other"，即可以有多個class名，代表疊加兩個類名稱對應的樣式。id名不能這樣寫。ID名常用在頁面布局（標記大框架），class一般在局部頁面布局中使用，用于樣式定義，因為命名時可將class名稱寫成一樣，所以只需要對該class寫一次樣式，就能讓有相同樣式的元素復用。使用CSS選擇器時劃定適當的命名空間,提高代碼可讀性，便于維護
選擇器使用示例html
#header{} /*選中id為header的元素*/
.header{} /*選中class=header的元素*/
.header .logo{} /*選中class=header下的所有class=logo的元素*/
.header.mobile{} /*選中class="header mobile"的元素*/
.header p, .header h3{} /*選中class=header元素下的所有p元素，同時選中class=header元素下的所有h3元素*/
#header .nav>li{} /*選中id=header元素下的所有class=nav元素的直接子元素li*/
#header a:hover{} /*選中id=header元素下的所有a元素，并使用hover偽類*/
常見偽類選擇器
【1】結構偽類選擇器
E:first-child 選中E所在父元素下的第一個子元素，且該子元素是E元素
E:last-child 選中E所在父元素下的最后一個子元素，且該子元素是E元素
E:root 選中E所在根節點的元素，對于HTML即選中HTML元素
E:nth-child(n) 選中E所在父元素下的第n個子元素，且該子元素是E元素
E:nth-last-child(n) 選中E所在父元素下的倒數第n個子元素，且該子元素是E元素
E:nth-of-type(n) 選中E所在父元素下的同類型元素中的第n個E元素
E:nth-last-of-type(n) 選中E所在父元素下的同類型元素中的倒數第n個E個元素
E:first-of-type 選中E所在父元素下的同類型元素中的第一個E元素
E:last-of-type 選中E所在父元素下的同類型元素中的最后一個E元素
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:empty匹配沒有子元素的元素，且該元素無任何文本節點
E:not(F) 匹配不符合當前選擇器的任何元素
【2】動態偽類選擇器 順序L-V-H-A
link-visited-hover-active
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:gree;
font-size:20px;
}
a:active{
color:gold;
}
a:focus{
color:gold; //a元素獲得焦點后的樣式
}
:first-child和:first-of-type的作用和區別
E:first-child 指定元素E，找其父元素下的第一個E元素
E：first-of-type 指定E類型的元素，找其父元素下的E類型元素的第一個
代碼示例：
htmlaa
bb
ccc
.item1:first-child{color:red;}class=item1元素的父元素div下的第一個子元素item1字體紅色bb
雖然class=item1但他們不是其父元素下的第一個子元素。,
ccc
.item1:first-of-type{background:blue;}class=item1元素的父元素下的同類型元素中的第一個class=item1的元素。
aa
的父元素div下的同類型元素（p,h3）分別選中第一個即aa,bb加藍色背景。 text-align: center的作用設置元素內的文本水平居中對齊。text-align應用在塊級元素上（div或p），對該塊級元素（div/p）其內部的行內元素（文字、圖片、input框）可設置對齊方式。
text-align有5個值：left/right/center/justify/inherit，左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候，每行中的字間距可能不一致。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113353.html
摘要：為標記語言提供了一種樣式描述，定義了其中元素的顯示方式。選擇器指明了中的樣式的作用對象，也就是樣式作用于網頁中的哪些元素基本語法第一種選擇器叫選擇器在里面寫一個，通過這個就能找到這個。一、CSS是什么？ 它是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。...
一、語法規則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...
一、語法規則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...
閱讀 4270·2021-09-26 10:11
閱讀 2666·2021-07-28 00:37
閱讀 3223·2019-08-29 15:29
閱讀 1178·2019-08-29 15:23
閱讀 3123·2019-08-26 18:37
閱讀 2467·2019-08-26 10:37
閱讀 596·2019-08-23 17:04
閱讀 2346·2019-08-23 13:44
