《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.5 E::selection伪类选择器

简介: 本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第19章 ,第19.4.5节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。

19.4.5 E::selection伪类选择器

E::selection伪类选择器用来指定当元素处于选中状态时的样式。
代码清单19-24为一个E::selection伪类选择器的使用示例,在该示例中分别给出了一个p元素,一个文本框控件以及一个表格。当p元素处于选中状态时,被选中文字变为红色;当文本框控件处于选中状态时,被选中文字变为灰色;当表格处于选中状态时,被选中文字变为绿色。


image
image

这段代码的运行结果如图19-36所示:


image

19.4.6 E:invalid伪类选择器与E:valid伪类选择器

q E:invalid伪类选择器用来指定,当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

q E:valid伪类选择器用来指定,当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素,当元素中没有被填入内容时元素背景色为红色,当元素中填入内容后元素背景色变为白色。


image

19.4.7 E:required伪类选择器与E:optional伪类选择器

q E:required伪类选择器用来指定允许使用required属性,且已经指定了required属性的input元素、select元素以及textarea元素的样式。

q E:optional伪类选择器用来指定允许使用required属性,且未指定required属性的input元素、select元素以及textarea元素的样式。

代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框,并且对用于输入姓名的文本框指定了required属性,不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色,宽度为3px,通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色,宽度为1px。


image
image

19.4.8 E:in-range伪类选择器与E:out-of-range伪类选择器

q E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式。

q E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),但实际输入值在该范围之外时使用的样式。

代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例。示例页面中包含一个数值输入控件(type属性值为number的input元素),通过min属性值与max属性值限定元素内的有效输入数值为从1到100,通过E:in-range伪类选择器指定元素内的输入值在该范围内时元素背景色为白色,通过E:out-of-range伪类选择器指定元素内的输入值在该范围之外时元素背景色为红色。


image
image

相关文章
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
825 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
669 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1144 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
295 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
635 33
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
320 2
|
前端开发 索引
|
前端开发 索引
说说九个CSS3结构性伪类选择器
我们在52CSS前面的文章中,陆续为大家讲了多种CSS选择器。今天说说九个CSS3结构性伪类选择器。 一、X:nth-child(n) Example Source Code [www.52css.com] li:nth-child(3) { color: red; } 接下来的几个伪类选择器使用上非常类似,功能也比较接近。
1455 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    466
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    363
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    349
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    233
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    469
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    634
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    995
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    250
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    836
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    430