//偽類選擇器
//選擇器優先順序
//css單位
//背景
屬性選擇器的標準語法如下：
e[attribute]
自定義屬性：只需要在標籤後加上自定義的屬性，例如
中的data-code
語法如下：
>
[data-code]
style
>
屬性選擇器也可以選擇已有屬性，可選擇同一標籤內多個屬性。中括號內就是屬性[ ]。
*所有 ^開頭 $結尾 ~包含 |預設加-
[data-code^=「kk」]
[data-code$=「kk」]
[data-code*=「kk」]
[data-code~=「kk」]
[data-code|=「kk」]
後代選擇器可以選擇作為某元素後代的元素。
我們可以定義後代選擇器來建立一些規則，使這些規則在某些文件結構中起作用，而在另外的一些結構中不起作用。規則左邊的選擇器一段包括兩個或多個用空格分割的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合夫可以解釋為「…在…找到…」「…作為…的一部分」「…作為…的後代」，但是要求必須從右到左讀選擇器。
後代選擇器的書寫方法：把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔，當標記發生巢狀時，內層的標記就成為外層標記的後代了。
後代選擇器語法格式如下：e1 e2
子元素選擇器只能選擇作為某元素的子元素。子選擇器使用了大於號（子結合符）。子結合符兩邊可以有空白符，這是可選的。
子選擇器的語法格式如下：e > f
相鄰選擇器可以選擇緊接在另一元素後的元素，而且他們具有相同的父元素。即，e和f具有相同的父元素。且f在e後面緊緊相鄰。
相鄰選擇器的語法格式如下：e + f
如下有兩個選擇器。
>h1p
style
>
>
h1,p
style
>
語法如下：
選擇符:偽類2、link 向未訪問過的鏈結新增樣式
3、visited 向訪問過的鏈結新增樣式
4、active 啟用元素新增樣式（例如：按下）
5、focus 向擁有輸入鍵盤焦點的元素新增樣式 solid 實線 border 邊框
以下是5個例子：
>
a:hover
a:link
a:visited
a:active
input[type="text"]:focus
style
>
2、last-child 匹配父類最後乙個子元素
3、nth-child(n) 匹配父類元素第幾個子元素 odd 2n 匹配奇數 even 2n+1偶數
下面是例子，以1為例，用法相同：
ul>li:first-child
lang=「國際語言縮寫」 代表該標籤內所寫語言。
用法與屬性選擇器相同。
::first-letter 第乙個字
::first-line 第一行
font-size:控制文字大小
例如：
p::first-letter
p::first-line
偽類選擇器乙個: 偽元素選擇器兩個 ::
僅限於塊級元素
::before 在之前設定樣式 1、需要配合content使用，content內一定要寫內容，否則不顯示。
::after 在之後設定樣式
::selection 選中時的樣式
div::before
div::selection
div
1,0,0,0,0 !importment （寫在後面）
0,1,0,0,0 內聯 外聯
0,0,1,0,0 id選擇器
0,0,0,1,0 類選擇器 偽類選擇器 屬性選擇器
0,0,0,0,1 元素偽類選擇器
0,0,0,0,0 萬用字元選擇器 後代選擇器 兄弟選擇器
直觀權重：
10000 !importment （寫在後面）
1000 內聯 外聯
100 id選擇器
10 類選擇器 偽類選擇器 屬性選擇器
1 元素偽類選擇器
0 萬用字元選擇器 後代選擇器 兄弟選擇器
在乙個節點上設定的樣式越多，越受權重影響。
使用原則：
1、使用就近原則
2、繼承樣式的優先級別最低
3、!inportment的樣式優先級別最高，如有衝突則重新計算。
% 百分比
in（英吋） 1in=96px=2.54cm
cm（厘公尺）
mm（公釐）
pt point（點 點越多越清晰） 大約七十二分之一英吋
px 畫素
em 瀏覽器預設字型大小 16px 1em=16px 2em=32px
如果當前元素設定字型大小則 em會根據當前元素進行倍數放大
如果沒有在當前元素設定字型大小 則選擇預設瀏覽器字型大小進行放大倍數
rem 根據根（html）元素字型尺寸的倍數
在html上設定字型大小，下面設定rem 會根據根元素大小進行倍數放大
% 百分比布局 em布局 rem布局 flex（主流）布局
vw 代表一屏的寬度
vh 代表一屏的高度
1、顏色名 直接寫單詞，如red yellow
2、rgb rgb值 red 紅色通道 green 綠色通道 blue 藍色通道
如rgb(255,255,255) 即白色。
3、rgb rgb百分比值 如rgb(0%,100%,0%) 即綠色 理解為濃度
4、rgba red 紅色通道 green 綠色通道 blue 藍色通道 alpha透明通道（取值範圍0~1）
5、16進製制數 #000000 #ffffff
background-color 背景顏色
background-repeat 背景圖平鋪
background-repeat:repeat 背景圖平鋪 （不自適應）
background-repeat:no-repeat 背景圖不平鋪
background-repeat:repeat-x 背景圖沿x軸平鋪（橫向平鋪）
background-repeat:repeat-y 背景圖沿y軸平鋪（縱向平鋪）
background-repeat:round 自動縮放，充滿整個容器（自適應）
background-repeat:space
background-position:x y （x減小，向右走，視線向左；y減小，向上走，視線下移）
icon 圖示 雪碧圖/精靈圖 滑動門
為什麼使用雪碧圖？
1、提高瀏覽器載入速度（暫知）
css選擇器，背景漸變
css選擇器 1.標籤選擇器，就是給常用的tag加上樣式 div2.所有元素的選擇器，整個文件內的所有元素都被設上該樣式 3.class選擇器 表示 test 4.id選擇器 表示 hello world world 將變成紅色 5.你還可以用方括號的形式指定其他屬性,如 input type te...
css外觀 div背景 選擇器
設定邊框厚度為1px 實線 border 1px solid 設定p標籤的高度 height 100px 如果行高和高度一致,則文字垂直居中 line height 100px 文字修飾 下劃線 text decoration underline 刪除線 text decoration line t...
CSS選擇器及用法
用來修飾標籤的技術，叫層疊樣式表 簡稱css 選中網頁中某乙個指定id的標籤的樣式 網頁中的標籤，每個標籤有且僅有乙個唯一的id 例項 選中所有網頁中指定class屬性的標籤的樣式 不同的標籤的class屬性可以一樣，表示使用同一種樣式來修飾 例項 使用指定的標籤，來修飾網頁中所有選中的標籤的樣式 ...