:empty 沒有子元素（包括文本節點）的元素 :not 否定選擇器 <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <s ...
:empty 沒有子元素（包括文本節點）的元素
:not 否定選擇器
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:not(:last-of-type){color:red;} </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
css權重與權值
行內樣式 1000
id選擇器 100
類、偽類、屬性選擇器 10
元素、偽元素 1
通配符 0
權重相同時根據就近原則
偽元素選擇器，：：
::first-line 選取文本的第一行，只能用於塊級元素
::first-letter 選取文本的第一個字，只能用於塊級元素
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{width:100px;} p:first-line{color:red;} p:first-letter{background-color: #abcdef;font-size:20px;} </style> </head> <body> <p>這是一段用於測試的文本哦~~~~~~~~~~~~~~~~~~~~</p> </body> </html>
::before 在指定元素內部的前面插入，且為行級元素
::after 同理
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:before{ content:"這是before文本+"; color:orange; } </style> </head> <body> <p>文本</p> </body> </html>
可以轉為塊級元素
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:before{ content:"這是before文本+"; color:orange; display: block; } </style> </head> <body> <p>文本</p> </body> </html>
::after 常用於清除浮動
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> header{background:#abcdef;} .left{float: left;width:50%;} .right{float: left;width:50%;} header:after{ display: block; content:""; clear:both; } </style> </head> <body> <header> <div class="left">左邊</div> <div class="right">右邊</div> </header> </body> </html>
::selection 選中文本的效果
IE9以上支持，火狐需要加 -moz 首碼
<!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p::selection{color:orange;} </style> </head> <body> <p>這是一段文本哦</p> </body> </html>
