1 CSS3 的選擇器

1.1 基本選擇器

tagName
.className
#idName
*
slector,selector,selector

1.2 層級選擇器

selector1 selector2     後代
selectoer1>selectoer2   子元素
selector1+selector2   	緊鄰在後面的兄弟元素
selector1~selector	後面所有兄弟元素

1.3 屬性選擇器

selector[attr]  	包含指定的屬性
selector[attr=value]  	指定屬性的值
selector[attr^=value]  	屬性值以value開頭
selector[attr$=value]  	屬性值以value結束
selector[attr*=value]  	屬性值包含value
selector[][][]          多個屬性選擇器
 

• 屬性選擇器優先級 同 class

1.4 偽類選擇器

/*語法*/
selector:偽類 {
   
}

:link	  未訪問的超鏈接
:visited  訪問過的超鏈接
:hover    鼠標懸停 任意元素
:actived  激活狀態的超鏈接

:focus    獲得焦點時

:first-child
:last-child
:nth-child()  	指定數字，也可以指定關鍵字"odd", "even"
:nth-last-child
:only-child

:fist-of-type
:last-of-type
:nth-of-type()		指定數字，也可以指定關鍵字"odd", "even"
:nth-last-of-type()
:only-of-type()
 

1.5 偽元素選擇器

::first-letter   第一個字
::first-line     第一行
::before         最前面插入一個子元素
::after		最後面追加一個子元素

2 CSS3 基礎

2.1 瀏覽器私有前綴

-weibkit-*    chrome/safari
-moz-*		 firefox
-ms-*		  ie
-o-*		 opera

2.2 CSS3 新增的顏色

rgba(r,g,b,不透明度)  不透明度：0~1 小數， 數越大，越不透明

2.3 CSS3新增長度單位

px
em	默認字體大小的倍數
rem	根元素字體大小的倍數
vw      窗口寬度分成100份  50vw
vh      窗口高度分成100份
 

2.4 CSS3新增屬性

# 重新設置 盒子模型的規則
box-sizing: content-box(默認) / border-box （width/height盒子的寬高）

# 外輪廓  在border的外面 不算盒子
outline: 
outline-style
outline-color
outline-width

# 不透明度
opacity 0~1 小數

2.3 設置圓角

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

python學習第四十九天：CSS3新增