前端技术学习之选择器(十二)

十三,::selection选择器

之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色。今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法。

代码例子:

.selectColor::selection{color:#fff;background:pink;}

普通文本,不设置::section,选中时文本的颜色为白色,背景色为蓝色

选择文本的颜色为白色,背景色为粉色

运行效果:

十四,:read-only

:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“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;

}

姓名:


国籍:


运行效果:

注:有了【:read-only】,再来个与之相反的【:read-write】意思很明确,就是即可读,也可写的元素设置样式。我觉得这个选择器可能只是充数的,为了让css3选择器成为一个体系而加的,因为默认情况就是可读可写的啊。上面的例子中如果改一点样式:给input[type="text"]加上:read-write选择器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,397评论 0 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,798评论 19 139
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 5,418评论 0 6
  • 放学后,宝宝像平常一样见了我就说:“妈妈,你最爱的宝宝回家喽”。我也赶紧像往常一样把她搂过来,亲了亲她。 然后闺女...
    幸福兜了一个圈阅读 2,472评论 3 3
  • 今天办离职手续的时候,我一直在琢磨,我到底为什么离开,和100天前的自己有什么进步。 从工作来讲 当工作进度已经达...
    大黑不小白阅读 1,085评论 0 0