前端技術(shù)學(xué)習(xí)之選擇器(十二)

十三,::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選擇器

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,311評論 0 11
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,680評論 19 139
  • (1). 陰影模糊半徑與陰影擴(kuò)展半徑的區(qū)別:陰影模糊半徑:此參數(shù)可選,其值只能是為正值,如果其值為0時,表示陰影不...
    Leisure_blogs閱讀 1,659評論 0 6
  • 放學(xué)后,寶寶像平常一樣見了我就說:“媽媽,你最愛的寶寶回家嘍”。我也趕緊像往常一樣把她摟過來,親了親她。 然后閨女...
    幸福兜了一個圈閱讀 346評論 3 3
  • 今天辦離職手續(xù)的時候,我一直在琢磨,我到底為什么離開,和100天前的自己有什么進(jìn)步。 從工作來講 當(dāng)工作進(jìn)度已經(jīng)達(dá)...
    大黑不小白閱讀 197評論 0 0

友情鏈接更多精彩內(nèi)容