被選擇的目標
可用於radio,checkbox,<option>
input:checked{
width:2em;
height:2em;
}
select :checked{
background:red;
}
判斷是否有disabled屬性
可用於任意元素
:enabled{
background:lightgreen;
}
:disabled{
background:red;
}
判斷是否符合驗證規則
沒有驗證功能的元素為invalid
IE10以下不支援
input:valid{
background:yellow;
}
input:invalid{
background:red;
}
判斷是否有required屬性
只作用於表單元素
IE10以下不支援
:required{
background:yellow;
}
:optional{
background:red;
}
判斷是否有readonly屬性
IE不支援，Firefox要加-moz-
可用於任意元素
:-moz-read-only{
background:yellow;
}
:read-only{
background:yellow;
}
:-moz-read-write{
background:red;
}
:read-write{
background:red;
}
判斷值是否在指定的區間內
只能用於可指定區間的元素
區間未指定則認定in-range
IE不支援
:in-range{
background:yellow;
}
:out-of-range{
background:red;
}
以FormSelectors裝飾網頁中的表單
被選取的錨點
p:target{
background:yellow;
}
.pages section{
border:1px solid gray;
position:absolute;
top:1em;
left:0;
width:500px;
height:300px;
background:#CCCCCC;
}
.pages section:target{
z-index:1;
}
在網頁中以CSS達成分頁效果
被框選的部分
只有color,background,outline,cursor可以使用
Firefox要加-moz-
::-moz-selection{
background:yellow;
color:red;
}
::selection{
background:yellow;
color:red;
}
文字中第一行
只有部分屬性可使用
一定是block
::first-line{
background:yellow;
}
一段文字中的第一個字
只有部分屬性可使用
一定是block
::first-letter{
background:yellow;
font-size:2em;
}
first-letter>first-line>selection
若選擇包含完整first-line則selection優先
Firefox:selection>first-letter>first-line
IE:selection&first-letter>first-line
selection與first-letter同時作用則使selection恢復預設值
以Pseudo-Elements裝飾網頁中的文字段落
元素前後的空白
搭配content屬性使用
常用於排版、繪圖等
content:normal|none|attr()|url()|("text")|counter|open-quote|close-quote|no-open-quote|no-close-quote