[TOC] # 寫的位置 1. 頁嵌式: ...... 寫在頁內 ~~~ <style type="text/css"> ...... </style> ~~~ 2. 連接式: 連到外部css文件,href表示路徑 ~~~ <link rel="stylesheet" href="css/style.css"> ~~~ 3. 行內式: 寫在行里 ~~~ <div style="width:100px;"></div> ~~~ 4. 導入式:`@import url(style.css);`導入外部css文件. 4種中用2連接式最好(正常情況下) **其權限是.3行內式>2連接式>1頁嵌式>4導入式** # 寫法 選擇器是一個選擇誰(標簽)的過程 ~~~ 選擇器{屬性:值; 屬性:值;} ~~~  # 基礎選擇器 標簽選擇器 ~~~ 標簽{屬性 : 值;} ~~~ 特點:標簽選擇器定義后,會將頁面所有的元素都執行這個標簽樣式 ~~~ div { font-size:50px; } ~~~ ## 顏色的顯示方式 * 直接寫顏色的名稱 * 十六進制顯示顏色 0-9 a-f ~~~ #000000; 前2位代表紅色,中間2位代表綠色,后邊2位代表藍色 ~~~ rgb ~~~ color: rgb(120,120,120); ~~~ rgba A代表alpha 不透明度 值 0-1 ~~~ color: rgba(102,217,239,0.5); ~~~ # 類選擇器 ~~~ .自定義類名{屬性名:值; 屬性:值; } ~~~ ~~~ .box{ font-size:40px; } <div class="box">11</div> ~~~ 特點.誰調用誰生效 一個標簽可以調用多個類選擇器 多個標簽可以調用同一個類選擇器  # ID選擇器 寫法 ~~~ #自定義名稱{屬性:值;} ~~~ 特點: 一個ID選擇器在一個頁面只能調用一次.如果使用2次或者2次以上,不符合w3c規范,js調用會出問題 一個標簽只能調用一個ID選擇器 一個標簽可以同時調用類選擇器和ID選擇器 # 通配符選擇器 ~~~ *{屬性: 值;} ~~~ 特點:給所有的標簽使用相同的樣式 不推薦使用,給瀏覽器和服務器負擔 # 復合選擇器 概念:兩個或者兩個以上的基礎選擇器通過不同的方式連接在一起 是即又的關系 * 交集選擇器 ~~~ 標簽+類(ID) 選擇器{屬性: 值;} ~~~ 特點:既要滿足使用了某個標簽,還有滿足使用了類(id)選擇器 ~~~ div .box{ color:red; } <div class="box">11</div> ~~~ # 后代選擇器 所有后代 ~~~ 選擇器+空格+選擇器{屬性: 值;} ~~~ 后代選擇器首選要滿足包含(嵌套)關系 父集元素在前邊,子集元素在后面 特點:無限制隔代 只要能代表標簽,類選擇器,ID選擇器自由組合 ~~~ .box span{ color:red; } <div class="box"> <span>11</span> </div> ~~~ # 子代選擇器 **直接后代** 孫子不管 ~~~ 選擇器>選擇器 {屬性:值;} ~~~ 選中直接下一代元素 ~~~ div>span{ color:red; } <div> <span>11</span> </div> ~~~ # 并集選擇器 都變 ~~~ 選擇器+,+選擇器+,選擇器{屬性:值;} ~~~ ~~~ .box, #miss{ color:red; } <div class="box"> <span id="miss">11</span> </div> ~~~ # 交集選擇器 由兩個選擇器構成,其中第一個標簽選擇器,第二個為class選擇器,兩個選擇器中間不能有空格. 交集選擇器是并且的意思. ~~~ p.one ~~~ # 偽類選擇器 ## 鏈接偽類選擇器 * :link 未訪問的鏈接 * :visited 已訪問的鏈接 * :hover鼠標移動到鏈接 * :active選定的鏈接 ~~~ a:link{} a{} 鏈接未訪問的狀態 a:visited{} 鏈接訪問之后的狀態 a:hover{} 鼠標放上去顯示的狀態 A:active{} 鏈接激活的狀態 :focus{} 獲取焦點的方式 ~~~ 注意寫的時候,順序不要顛倒lvha順序 ~~~ a:hover { } ~~~ ## 結構偽類選擇器 - :first-child :選取屬于其父元素的首個子元素的指定選擇器 - :last-child :選取屬于其父元素的最后一個子元素的指定選擇器 - :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型 - :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。 n 可以是數字、關鍵詞或公式 n值為odd是所有奇數,even是所有偶數 n值為2n就是0,2,4,6,8... n值為3n就是0,3,6,9...... ~~~css li:first-child { /* 選擇第一個孩子 */ color: pink; } li:last-child { /* 最后一個孩子 */ color: purple; } li:nth-child(4) { /* 選擇第4個孩子 n 代表 第幾個的意思 */ color: skyblue; } ~~~ ## 目標偽類選擇器(CSS3) :target目標偽類選擇器 :選擇器可用于選取當前活動的目標元素 ~~~css :target { color: red; font-size: 30px; } ~~~ # 屬性選擇器 | 選擇器 | 示例 | 含義 | | --------------------- | ---- | -------------------- | | `E[attr] ` | | 存在attr屬性即可 | | `E[attr=val]` | | 屬性值完全等于val | | `E[attr*=val]` | | 屬性值里包含val字符并且在“任意”位置 | | `E[attr^=val]` | | 屬性值里包含val字符并且在“開始”位置 | | `E[attr$=val]` | | 屬性值里包含val字符并且在“結束”位置 | ~~~css /* 獲取到 擁有 該屬性的元素 */ li[type] { border: 1px solid gray; } /* 獲取 屬性等于某個值的 元素 屬性值 可以使用 引號進行包裹 */ li[type="vegetable"] { background-color: green; } /* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */ li[type~="hot"] { font-size: 40px; } /* 獲取以某個屬性開頭的語法 */ li[color^='green'] { background-color: orange; } /* 獲取以某個值 結尾的屬性 */ li[type$='t']{ color: hotpink; font-weight: 900; } /* 獲取 屬性中 擁有某個值的 元素 */ li[type*=ea] { font-size: 100px; } /* 如果屬性的值 只有very 也能夠獲取 用來獲取 多個屬性 并且 使用-連接 */ li[price|='very'] { background-color: darkred; } ~~~ ~~~html <ul> <li type='fruit' color='green'>西瓜</li> <li type='vegetable' color='greenyellow'>西蘭花</li> <li type='meat'>牛肉</li> <li type='meat hot'>豬肉</li> <li type='drink hot'>可樂</li> <li type='drink hot'>雪碧</li> <li price='very-cheap'>紅酒</li> <li price='very'>白酒</li> </ul> ~~~ 偽元素選擇器（CSS3) 1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等） 2. E::first-line 文本第一行； 3. E::selection 可改變選中文本的樣式； ~~~css p::first-letter { font-size: 20px; color: hotpink; } /* 首行特殊樣式 */ p::first-line { color: skyblue; } p::selection { /* font-size: 50px; */ color: orange; } ~~~ 4. E::before和E::after 在E元素內部的開始位置和結束位創建一個元素，該元素為**行內元素**，且必須要結合content屬性使用。 ~~~css div::befor { content:"開始"; } div::after { content:"結束"; } ~~~ E:after、E:before 在舊版本里是偽元素，CSS3的規范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。 `":"` 與 `"::"` 區別在于區分偽類和偽元素 # 總結