如果 input 元素中的值是非法的，实时提醒

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

span{

    display:none;

    color:#f00;

}

input:invalid + span{

    display:block;

}

</style>

</head>

<body>

<h3> :invalid 选择器实例演示。</h3>

<input type="email" value="supportEmail" />

<span>格式不正确</span>

<p>请输入合法 e-mail 地址，查看样式变化。</p>

</body>

</html>

：

CSS :invalid 选择器的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. css后代选择器（div.class中间不带空格）

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  5. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  6. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  7. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  8. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  9. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

随机推荐

  1. P2157 [SDOI2009]学校食堂

    题目描述 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负整数 ...

  2. 自学Linux Shell2.1-进入shell命令行

    点击返回 自学Linux命令行与Shell脚本之路 2.1-进入shell命令行 进入文本命令行界面(CLI)两种方法: 控制台终端 图形化终端 1. 通过Linux控制台终端访问CLI 按下Ctrl ...

  3. [luogu1373]小a和uim之大逃离【动态规划】

    传送门:https://www.luogu.org/problemnew/show/P1373 定义状态是:\(f[i][j][h][0..1]\)表示在\([i,j]\)两个人相差为h,让某一个人走 ...

  4. 51nod1236 序列求和 V3 【数学】

    题目链接 51nod1236 题解 用特征方程求得斐波那契通项: \[f(n) = \frac{(\frac{1 + \sqrt{5}}{2})^{n} - (\frac{1 - \sqrt{5}}{ ...

  5. Linux中使用Electronic WeChat客户端

    微信推出了Windows版和Mac版,一直没有推出也不会推出Linux版本,这就催生了Electronic WeChat(https://github.com/geeeeeeeeek/electron ...

  6. A1029. Median

    Given an increasing sequence S of N integers, the median is the number at the middle position. For e ...

  7. 【bzoj2038】小Z的袜子

    莫队算法是一种针对询问进行分块的离线算法,如果已知区间 [ l , r ] 内的答案,并且可以在较快的时间内统计出区间 [ l-1, r ],[ l , r+1 ] 的答案,即可使用莫队算法. 莫队复 ...

  8. Python基本数据类型——元组和集合

    元组 tuple tuple和list非常类似,但是tuple一旦初始化就不能修改.元组采用圆括号表示. 例如: >>> tuple = (1,2,3) >>> t ...

  9. （转）Visual Studio控制台程序输出窗口一闪而过的解决方法

    背景:熟悉visiual studio工具的使用 刚接触 Visual Studio的时候大多数人会写个Hello World的程序试一下,有的人会发现执行结束后输出窗口会一闪而过,并没有出现Pres ...

  10. Python之数据加密与解密及相关操作（hashlib、hmac、random、base64、pycrypto）

    本文内容 数据加密概述 Python中实现数据加密的模块简介 hashlib与hmac模块介绍 random与secrets模块介绍 base64模块介绍 pycrypto模块介绍 总结 参考文档 提 ...