canvas例項--單畫素操作
1、基本選擇器
（1）萬用字元選擇器（*）
| 1 2 3 4 |
* {
marigin: 0;
padding: 0;
}
|
（2）標籤選擇器 如div p li
| 1 2 3 4 |
p{
background-color: grey;
color: orange;
}
|
(3) 類選擇器（.class）
| 1 2 3 4 |
.important {
font-weight: bold;
color: yellow;
}
|
(4)多類名 選擇器
| 1 2 3 |
p.items {
color: red;
}
|
（5）id選擇器
| 1 2 3 4 |
#first {
background: lime;
color: #000;
}
|
（6）群組選擇器
| 1 2 3 4 5 |
.first, .last {
background: green;
color: yellow;
border: 1px solid #ccc;
}
|
2、複雜選擇器
（1）後代選擇器
| 1 2 3 |
.demo li {
color: blue;
}
|
（2）子元素選擇器
| 1 2 3 4 |
ul > li {
background: green;
color: yellow;
}
|
（3）兄弟元素選擇器
| 1 2 3 4 5 |
li + li {
background: green;
color: yellow;
border: 1px solid #ccc;
}
|
（4）通用兄弟選擇器
| 1 2 3 4 5 |
.active ~ li {
background: green;
color: yellow;
border: 1px solid #ccc;
}
|
3、CSS3屬性選擇器
[attribute] [target]選擇所有帶有target屬性元素
| 1 2 |
.demo a[href][title] {
}
|
[attribute=value] [target=-blank]選擇所有使用target="-blank"的元素
| 1 2 3 4 5 6 7 |
/**選擇了.demo下id="first"的a元素 **/
.demo a[id="first"] {
}
/**選擇了.demo下id="first"，且擁有title屬性的a元素 **/
.demo a[id="first"][title] {
}
|
[attribute^=value] a[src^="https"]選擇每一個src屬性的值以"https"開頭的元素
| 1 2 |
a[href^="mailto:"] {
}
|
[attribute$=value] a[src$=".pdf"]選擇每一個src屬性的值以".pdf"結尾的元素
| 1 2 |
a[href$="png"] {
}
|
[attribute*=value] a[src*="runoob"]選擇每一個src屬性的值包含子字串"runoob"的元素 元素值匹配。
a[title*="site"] {
}
E[attribute|=value]
| 1 2 3 4 5 6 7 |
img[src|="figure"] {
}
<img src="figure-0.png" alt="圖1">
<img src="figure-1.png" alt="圖1">
<img src="figure-2.png" alt="圖1">
|
E[attribute~=value]
| 1 2 3 4 |
a[class~="links"] {
}
<a href="" class="links item">hangge.com</a>
|
4、動態偽類選擇器
| 1 2 3 4 |
a:link {color:gray;} /*連結沒有被訪問時前景色為灰色*/
a:visited{color:yellow;} /*連結被訪問過後前景色為黃色*/
a:hover{color:green;} /*滑鼠懸浮在連結上時前景色為綠色*/
a:active{color:blue;} /*滑鼠點中啟用連結那一下前景色為藍色*/
|
5、UI元素狀態偽類選擇器
- <input type="text"/>有enable和disabled兩種狀態，前者為可寫狀態後者為不可寫狀態
- <input type="radio"/>和<input type="checkbox"/>有checked和unchecked兩種狀態。
-
1 2 3 4 5 6 input[type="text"]:disabled {}/** 下面對所選中的的複選框設定樣式 **/input[type="checkbox"]:checked {}
5、CSS3偽類選擇器
:nth-child(n) p:nth-child(2)選擇每個p元素是其父級的第二個子元素 父類的2個元素要是標籤，不是則不匹配。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.demo li:nth-child(3) {
}
/** 選擇.demo下所有偶數位置的li子元素（2,4,6...） **/
.demo li:nth-child(even) {
}
/** 選擇.demo下第5個位置起的所有li子元素（5,6,7...） **/
.demo li:nth-child(n+5) {
}
/** 選擇.demo下前5個li子元素（1,2,3,4,5） **/
.demo li:nth-child(-n+5) {
}
/** 選擇.demo下從1起，隔3取1的所有li子元素（1,5,9...） **/
.demo li:nth-child(4n+1) {
}
|
:nth-last-child(n) p:nth-last-child(2)選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.demo li:nth-last-child(3) {
}
/** 選擇.demo下倒數第2個起偶數位置的li子元素（倒數第2個,倒數第4個...） **/
.demo li:nth-last-child(even) {
}
/** 選擇.demo下倒數第5個位置起的所有li子元素（倒數第5個,倒數第6個...） **/
.demo li:nth-last-child(n+5) {
}
/** 選擇.demo下最後5個li子元素（倒數第1,2,3,4,5） **/
.demo li:nth-last-child(-n+5) {
}
/** 選擇.demo下從最後1個起，隔3取1的所有li子元素（倒數第1,5,9...） **/
.demo li:nth-last-child(4n+1) {
}
|
:last-child p:last-child指定只有選擇每個p元素是其父級的最後一個子級。
| 1 2 |
.demo li:last-child {
}
|
:first-child p:first-child指定只有當<p>元素是其父級的第一個子級的樣式
| 1 2 |
.demo li:first-child {
}
|
E:only-child
| 1 2 |
.demo p:only-child {
}
|
E:empty
| 1 2 3 |
p:empty {
display: none;
}
|
- E:first-of-type：類似於E:fisrt-child，只不過它選擇父元素內具有指定型別的第一個E元素
- E:last-of-type：類似於E:last-child，只不過它選擇父元素內具有指定型別的最後一個E元素
- E:nth-of-type(n)：類似於E:nth-child(n)，只不過它選擇父元素內具有指定型別的第n個E元素
- E:nth-last-of-type(n)：類似於E:nth-last-child(n)，只不過它選擇父元素內具有指定型別的倒數第n個E元素
- E:only-of-type：類似於E:only-child，只不過它選擇父元素只包含一個同類型子元素，且該子元素匹配E元素
6、否定偽類選擇器
匹配所有除元素F外的E元素，類似以jQuery中的:not選擇器。
| 1 2 3 |
input:not([type="submit"]) {
border: 1px solid red;
}
|
7、CSS3偽元素選擇器
是一個行內元素，需要轉換成塊:display:block float:**position:。
注意： Before 與 after
必須新增content,哪怕不設定內容，也需要content:””。
E:after、E:before在舊版本里是偽類，在新版本里是偽元素，新版本下E:after、
E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做相容處理。
:first-letter p:first-letter選擇每一個<P>元素的第一個字母或者第一個漢字
| 1 2 3 4 5 6 |
/** 首字下沉 **/
p::first-letter {
font-size: 56px;
float:left;
margin-right:3px;
}
|
:first-line p:first-line選擇每一個<P>元素的第一行
| 1 2 3 4 |
/** 比如說改變每個段落的第一行文字的樣式 **/
p::first-line {
font-weight:bold;
}
|
:before p:before在每個<p>元素之前插入內容 使用contant插入內容
| 1 |
.clearfix::before {clear: both;}
|
:after p:after在每個<p>元素之後插入內容
::selection
用來改變瀏覽網頁選中文的預設效果。::selection只能設定兩個屬性：一個就是background,另一個就是color屬性。
| 1 2 3 4 |
p::selection {
background: red;
color: #fff;
}
|