十三,::selection選擇器
之前看到有些網(wǎng)站選中內(nèi)容的顏色和背景色都不是平時看到的藍(lán)色和白色。今天有興趣查看了一下,原來是一個很簡單的CSS3的選擇器::selection的用法。
代碼例子:
.selectColor::selection{color:#fff;background:pink;}
普通文本,不設(shè)置::section,選中時文本的顏色為白色,背景色為藍(lán)色
選擇文本的顏色為白色,背景色為粉色
運(yùn)行效果:
十四,:read-only
:read-only選擇器用來指定處于只讀狀態(tài)元素的樣式。簡單說就是設(shè)置了“readonly”=readonly的元素。
代碼例子:
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > input {
margin-bottom: 10px;
}
input[type="text"] {
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:read-only {
border-color: #ccc;
}
姓名:
國籍:
運(yùn)行效果:
注:有了【:read-only】,再來個與之相反的【:read-write】意思很明確,就是即可讀,也可寫的元素設(shè)置樣式。我覺得這個選擇器可能只是充數(shù)的,為了讓css3選擇器成為一個體系而加的,因?yàn)槟J(rèn)情況就是可讀可寫的啊。上面的例子中如果改一點(diǎn)樣式:給input[type="text"]加上:read-write選擇器