CSS3選擇器&屬性整理
圖片在WPS里無法粘貼
元素選擇器
①屬性選擇器
| E {...} |
對所有E元素起作用 |
| E[attr] {...} |
對所有具有arrt屬性的E元素起作用 |
| E[attr=value] {...} |
對所有具有arrt屬性且值為value的E元素起作用 |
| E[attr^=”value”] {...} |
對所有具有arrt屬性且值以value開頭的E元素起作用 |
| E[attr$=”value”] {...} |
對所有具有arrt屬性且值以value結尾的E元素起作用 |
| E[attr*=”value”] {...} |
對所有具有arrt屬性且值包含value的E元素起作用 |
示例：
/*對所有div元素起作用*/
div {
width:100px;
height:100px;
}
/*對所具有name屬性的div元素起作用*/
div[name] { }
/*對所有具有name屬性且值為test的div元素起作用*/
div[name=”test”] { }
/*對所有具有name屬性且值以test開頭的div元素起作用*/
div[name^=”test”] { }
/*對所有具有name屬性且值以test結尾的div元素起作用*/
div[name$=”test”] { }
/*對所有具有name屬性且值包含test的div元素起作用*/
div[name*=”test”] { }
②ID選擇器
| #idValue {...} |
對id值為idValue的元素起作用 |
| E#idValue {...} |
對id值為idValue的E元素起作用 |
示例代碼：
/*對id值為user的元素起作用*/
#user { }
/*對id值為user的input元素起作用*/
Input#user { }
③class選擇器
| .myClass {...} |
對所有class屬性值為myClass的元素起作用 |
| E.myClass {...} |
對所有class屬性值為myClass的E元素起作用 |
示例代碼：
/*對所有class屬性值為myClass的元素起作用*/
#user { }
/*對id值為user的input元素起作用*/
input#user { }
④關系選擇器
- 包含選擇器：A B(A和B是前三者的選擇器)
例如：div .user 對在div內部並且class=”user”的元素起作用
- 子選擇器：A>B(A和B是前三者的選擇器)
例如：div>.user 對在div的子元素並且class=”user”的元素起作用
- 兄弟選擇器：A~B(A和B是前三者的選擇器)
例如：#abc~ .user 對和id=”abc”的元素的后面兄弟元素中class=”user”的元素起作用
說明：多個選擇器組合用,隔開A,B,C {...}
p,#abc,.aaa:匹配id=”abc”,class=”aaa”的p元素
⑤偽元素選擇器
| 格式 |
示例 |
解釋 |
| :first-letter |
div:first-letter #abc:first-letter |
只對選擇的元素對象的第一個字符起作用 |
| :first-line |
.test:first-line #abc~ .user:first-line |
只對選擇的元素對象的第一行起作用 |
| :after :before |
|
我不常用，以后再解釋 |
⑥偽類選擇器
| :frist-child |
匹配其父元素第一個子節點 |
| :last-child |
匹配其父元素最后一個子節點 |
| :nth-child(n) |
匹配其父元素第n個子節點 |
| :nth-last-child(n) |
匹配其父元素倒數第n個子節點 |
| :first-of-type |
匹配其父元素中與自身同類型同級別第一個子節點 |
| :last-of-type |
匹配其父元素中與自身同類型同級別最后一個子節點 |
| :nth-of-type(n) |
匹配其父元素中與自身同類型同級別第n個子節點 |
| :nth-last-of-type(n) |
匹配其父元素中與自身同類型同級別倒數第n個子節點 |
示例代碼：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type=”text/css”>
p#abc:frist-child {...}/*匹配第一個元素 */
Div .div1:frist-child {...}/*匹配第一個元素 */
p#abc:nth-child(3) {...}/*匹配第三個元素 */
p#abc:nth-last-of-type(3) {...}/*匹配第四個元素 */
Div .div1:last-of-type {...}/*匹配第六個元素 */
</style>
<body>
<div>
<p>第一個元素</p>
<p id=”abc”>第二個元素</p>
<div class=”div1”>第三個元素</div>
<p>第四個元素</p>
<p>第五個元素</p>
<div >第六個元素</div >
<p>第七個元素</p>
</div>
</body>
</html>
| nth-child(odd/event) |
匹配其父元素所有奇數/偶數子節點 |
| nth-last-child(odd/event) |
匹配其父元素倒數開始的所有奇數/偶數子節點 |
| nth-child(xn+y) |
匹配其父元素所有xn+y子節點 |
| nth-last-child(xn+y) |
匹配其父元素倒數開始的所有xn+y子節點 |
| nth-of-type(odd/event) |
匹配其父元素中與自身同類型同級別的所有奇數/偶數子節點 |
| nth-last-of-type(odd/event) |
匹配其父元素中與自身同類型同級別的所有倒數開始的奇數/偶數子節點 |
| nth-of-type(xn+y) |
匹配其父元素中與自身同類型同級別的所有xn+y子節點 |
| nth-last-of-type(xn+y) |
匹配其父元素中與自身同類型同級別的所有倒數開始的xn+y子節點 |
⑦UI元素狀態偽類選擇器
| :link |
未被訪問過的元素（通常指鏈接） |
| :visited |
已被訪問過的元素（通常指鏈接） |
| :active |
鼠標點擊到釋放之間的狀態的元素 |
| :hover |
鼠標放在上面的元素 |
| ::selection |
被選中的內容 |
CSS屬性
字體相關屬性
| 屬性 |
屬性值 |
介紹 |
| color |
|
字體顏色 |
| font-family |
|
設置文本字體 |
|
font-size |
xx-small x-small small medium large x-large xx-large |
最小字體 較小字體 小字體 正常字體 大字體 較大字體 最大字體 |
|
font-stretch |
narrower normal wider |
橫向拉伸文字 正常 橫向壓縮文字 |
|
font-style |
normal italic oblique |
正常 斜體字體 傾斜字體 |
|
font-weight |
lighter normal bold bolder
|
更細 正常 加粗 更粗 或者用100、200、300...控制字體加粗程度 |
|
text-decoration |
none blink underline line-through overline |
無修飾 字體閃爍 下畫線修飾 中畫線修飾 上畫線修飾 |
|
font-variant |
normal small-caps |
文本大小寫字母格式： 正常 小型大寫字母字體 |
|
text-transform |
none capitalice uppercase lowercase |
文本大小寫轉換 不轉換 首字母大寫 全大寫 全小寫 |
| line-height |
n pt/px |
字體行高（負值為陰影效果） |
| letter-spacing |
n pt/px |
字符之間的距離 |
| word-spacing |
n pt/px |
單詞之間間距 |
| text-shadow |
|
字體陰影 |
text-shadow:xoffset yoffset radius color;
舉例：text-shadow：5px -5px 2px gray;
其中四個屬性值如表所示
| xoffset |
橫向偏移（左為負右為正） |
| yoffse |
縱向偏移（上為正下為負） |
| radius |
陰影模糊半徑，越大越模糊 |
| color |
陰影顏色 |
CSS3支持的顏色表示方法有很多，最常見的有顏色名、十六進制顏色值、rgb(r,g,b)顏色表
字體顏色屬性參照博客：https://www.cnblogs.com/5H5H/p/9784015.html
文本相關屬性
| 屬性 |
屬性值 |
介紹 |
| text-indent |
n pt/px |
段落文本縮進 |
|
text-overflow |
clip ellipsis |
當元素指定overflow:hidden文本溢出處理方式 簡單剪切溢出文字 簡單剪切溢出文字並顯示溢出標記（...） |
|
vertical-align （比較難） |
auto baseline sub supper top middle bottom length |
目標組件內部垂直對其方式 對元素文本內容自動對齊 （默認值）支持valign文本內容與基線對齊 元素內容與文本下標對齊 元素內容與文本上標對齊 支持valign文本內容與元素頂端對齊 支持valign文本內容與元素中間對齊 支持valign文本內容與元素底端對齊 指定文本相對基線偏移距離，可用百分比
|
|
text-align |
left right center justify |
元素內部文本對齊方式 左對齊 右對齊 居中對齊 兩端對齊 |
|
direction |
ltr rtl |
元素內部文本流入方式 從左向右 從右向左 |
|
word-break |
normal keep-all break-all |
瀏覽器方式 只能在半角空格或連字符處換行 允許在單詞中間換行 |
背景相關屬性
| background-attachment |
scroll：背景圖片隨組件內容滾動 fixed：背景圖片固定 |
| background-color |
背景顏色 |
| background-image |
背景圖片 url(“圖片地址”) |
| background-clip |
背景覆蓋范圍（見詳解1） |
|
background-origin |
背景覆蓋起點 border：邊框區 padding：內補丁區 content：內容區 |
| background-size |
圖片背景大小（寬度和高度） |
詳解1
background-clip：背景覆蓋范圍，有如下四個屬性
| border-box no-clip |
指定背景覆蓋邊框區(border)、內補丁區(padding)、內容區(content) |
| padding-box |
指定背景覆蓋內補丁區(padding)、內容區(content) |
| content-box |
指定背景覆蓋內容區(content) |
邊框相關屬性
| border-(top/right/bottom/left)-color |
邊框顏色 |
| border-(top/right/bottom/left)-style |
邊框風格 |
| border-(top/right/bottom/left)-width |
邊框線寬 |
邊框風格的屬性值：
| none |
無邊框 |
| hidden |
隱藏邊框 |
| dotted |
電線邊框 |
| dashed |
虛線邊框 |
| solid |
實線邊框 |
| double |
雙線邊框 |
| groove |
3D凹槽邊框 |
| ridge |
3D凸槽邊框 |
| inset |
3D凹入邊框 |
| outset |
3D凸出邊框 |
特殊邊框屬性：
①漸變邊框：
border-(top/right/bottom/left)-colors:#555 #666...;
用多種顏色值來實現邊框漸變效果
②圓角邊框：
border-radius：四角圓角
border-top-left-radius：上左圓角，其他三個角類似
③圖片邊框:
border-image-source:url(“”);
border-image-slice:apx bpx cpx dpx;
border-image-slice屬性如圖所示把圖片切割成9個部分，舍棄中間的一塊，上下左右的四塊成為邊框上下左右四塊，圖片四個角成為邊框四個角。
④內補丁屬性：
padding-top/right/bottom/left:apx bpx cpx dpx;
上右下左內補丁距離
⑤外補丁屬性：
margin-top/right/bottom/left:apx bpx cpx dpx;
上右下左外補丁距離
大小相關屬性
| height： max-height： min-height |
高度 限高最大 限高最小 |
| width: max-width: min-width: |
寬度 限寬最大 限寬最小 |
|
box-size |
content-box:寬高對內容區生效 padding-box:寬高對內補丁區+內容區生效（只有Firefox支持） border-box：寬高對邊框+內補丁區+內容區生效 |
|
resize |
對所有設置overflow屬性的HTML組件有效 none：不允許拖動改變大小 both：允許拖動改變組件寬度和高度 horizontal：允許拖動改變組件寬度 vertical：允許拖動改變組件高度 inherit：繼承父元素的resize值 |
定位相關屬性
|
position |
absolute 漂浮於頁面之上 relative 目標對象參照前一個對象定位 static 目標對象以頁面為參考系 |
| z-index |
值越大，越漂浮於上層 |
| top/right/borrom/left |
對最近一個有定位的父對象的上/右/下/左偏移 |
布局相關屬性
| float |
向left/right浮動 |
| clear |
none不清除浮動 清除left/right/both的浮動 |
| clip |
auto 不剪切 rect(A,B,C,D)如下圖方式剪切HTML元素 |
|
overflow-(x/y) |
水平/垂直方向 visible 不剪切內容，不添加滾動條 auto 自動添加滾動條 hidden自動剪切 scroll總是顯示滾動條 |
白色(可視區域)為剪切之后的部分，如果A,B,C,D其中的值是auto，即長度為0。
多欄布局
目前各版本瀏覽器還未統一，需要加入前綴
| column-width |
每個欄目寬度 |
column |
| column-count |
欄目數 |
|
| column-rule-width |
欄目之間分隔條的寬度 |
column-rule |
| column-rule-style |
欄目分隔條線型（屬性值與border一樣） |
|
| column-rule-color |
分隔線顏色 |
|
| column-gap |
欄目之間間隔 |
|
|
column-fill |
欄目高度 auto 隨內容多少自動 balance和內容最多一欄一樣 |
|
表格相關屬性
| border-collapse |
控制兩個表格邊框是否合並 seperate分開，即雙線 collapse合並，即單線 |
| border-spacing |
當border-collapse為seperate時，設置雙線距離 |
| caption-side |
表格標題位於表格top/right/bottom/left |
| empty-cells |
當border-collapse為seperate時,單元格內容為空時是否顯示邊框，show顯示，hide隱藏 |
| table-layout |
auto默認布局 fixed固定布局 |
當表格布局為table-layout=fixed時可以在<table>標簽里加<col.../>標簽，<col.../>標簽代表每列。
①如果設置多個<col.../>標簽，則表格寬度等於所有標簽寬度總和。
②如果設置一個<col.../>標簽，則每列寬度都是和第一列一樣，也就是和<col.../>標簽的寬度屬性一樣
③如果沒有設置標簽，則平分表格。
列表相關屬性
| list-style-image |
列表項標記圖片 |
| list-style-position |
列表標記位置 outside列表元素之外 inside列表元素之內 |
|
list-style-type |
decimal阿拉伯數字 disc實心圓 circle空心圓 square實心方塊 還有很多用的不多，看圖。。。 |
控制光標屬性
cursor屬性值(用的不多，看圖)