對齊、組合選擇符、僞類

Align 對齊

 

<p相似這樣的元素對齊時，預先肯定margin和元素的填充，始終是一個好主意。這是爲了不在不一樣的瀏覽器中的可視化差別。

body

{

margin:0;

padding:0;

}

 

 

使用float屬性設置左，右對齊。

.right

{

float:right;

width:300px;

 

}

IE8和早期有一個問題，當使用float屬性時。若是一個容器元素（在本例中<div class="container">）指定的寬度，!DOCTYPE聲明是缺失，IE8和早期版本會在右邊增添17px的margin。這彷佛是一個滾動的預留空間。使用float屬性時始終設置在DOCTYPE聲明中。

 

 

clear float,並非咱們看float不爽，而是，在某些狀況下，float形成了咱們佈局上的問題，使咱們不得不去清除float帶來的影響。

若是內層div浮動的話，那麼在沒有給父div設置高度，padding，margin的狀況下，父的高度爲0。而咱們知道，父容器的高度能夠被內層的內容的高度撐大，這就是因爲float形成的高度塌陷問題。

若是咱們沒有給父div設置高度，只設置padding和margin,如效果圖所示，實際上的高度等於上下border,加上上下padding，加上margin,而content的高度仍是爲0，仍是由於float的緣由，高度塌陷。

建立了 Block Formatting Context 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 'margin' 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會摺疊（collapse）。

可用overflow:hidden/auto來清除浮動等問題的緣由。

 

 

————————————————————————————————————————————————————————————

組合選擇符

後代選取器(以空格分隔)

div p

{

 

}

 

子元素選擇器(以大於號分隔）

選擇了<div>元素中全部直接子元素 <p>

div>p

{

 

}

 

相鄰兄弟選擇器（以加號分隔）

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另外一元素後的元素，且兩者有相同父元素。【選取一個】

div+p

{

 

}

選取第二個p，跳過第一個p：div+p+p。

 

普通兄弟選擇器（以破折號分隔）

全部 <div> 元素的全部相鄰兄弟元素 <p>

div~p

{

 

}

 

————————————————————————————————————————————————————————————

僞類

用來添加一些選擇器的特殊效果。

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

 

a:link {color:#FF0000;} /* 未訪問的連接 */

a:visited {color:#00FF00;} /* 已訪問的連接 */

a:hover {color:#FF00FF;} /* 鼠標劃過連接 */

a:active {color:#0000FF;} /* 已選中的連接 */

 

注意： 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

注意： 在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

注意：僞類的名稱不區分大小寫。

 

僞類能夠與 CSS 類配合使用：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS Syntax</a>

 

 

:first-child 僞類來選擇元素的第一個子元素【第一個符合條件的】

 

 

 

全部CSS僞類/元素

http://www.runoob.com/css/css-pseudo-classes.html

選擇器 示例 示例說明

:checked input:checked 選擇全部選中的表單元素

:disabled input:disabled 選擇全部禁用的表單元素

:empty p:empty 選擇全部沒有子元素的p元素

:enabled input:enabled 選擇全部啓用的表單元素

:first-of-type p:first-of-type 選擇每一個父元素是p元素的第一個p子元素

:in-range input:in-range 選擇元素指定範圍內的值

:invalid input:invalid 選擇全部無效的元素

:last-child p:last-child 選擇全部p元素的最後一個子元素

:last-of-type p:last-of-type 選擇每一個p元素是其母元素的最後一個p元素

:not(selector) :not(p) 選擇全部p之外的元素

:nth-child(n) p:nth-child(2) 選擇全部p元素的第二個子元素

:nth-last-child(n) p:nth-last-child(2) 選擇全部p元素倒數的第二個子元素

:nth-last-of-type(n) p:nth-last-of-type(2) 選擇全部p元素倒數的第二個爲p的子元素

:nth-of-type(n) p:nth-of-type(2) 選擇全部p元素第二個爲p的子元素

:only-of-type p:only-of-type 選擇全部僅有一個子元素爲p的元素

:only-child p:only-child 選擇全部僅有一個子元素的p元素

:optional input:optional 選擇沒有"required"的元素屬性

:out-of-range input:out-of-range 選擇指定範圍之外的值的元素屬性

:read-only input:read-only 選擇只讀屬性的元素屬性

:read-write input:read-write 選擇沒有隻讀屬性的元素屬性

:required input:required 選擇有"required"屬性指定的元素屬性

:root root 選擇文檔的根元素

:target #news:target 選擇當前活動#news元素(點擊URL包含錨的名字)

:valid input:valid 選擇全部有效值的屬性

:link a:link 選擇全部未訪問連接

:visited a:visited 選擇全部訪問過的連接

:active a:active 選擇正在活動連接

:hover a:hover 把鼠標放在連接上的狀態

:focus input:focus 選擇元素輸入後具備焦點

:first-letter p:first-letter 選擇每一個<p> 元素的第一個字母

:first-line p:first-line 選擇每一個<p> 元素的第一行

:first-child p:first-child 選擇器匹配屬於任意元素的第一個子元素的 <]p> 元素

:before p:before 在每一個<p>元素以前插入內容

:after p:after 在每一個<p>元素以後插入內容

:lang(language) p:lang(it) 爲<p>元素的lang屬性選擇一個開始值

 

————————————————————————————————————————————————————————————