如果 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. UVa - 10339

    It has been said that a watch that is stopped keeps better time than one that loses 1 second per day ...

  2. MT【73】求函数表达式

    评:由关系式求表达式最经典的莫过于已知$f(x+y)=f(x)f(y)$利用柯西法求得 $f(x)=[f(1)]^x$

  3. 自学工业控制网络之路1.6-典型的现场总线介绍Interbus

    返回 自学工业控制网络之路 自学工业控制网络之路1.6-典型的现场总线介绍Interbus 1987年正式公布,其主要技术开发者为德国的PhoenixContact公司.1996年,INTERBUS成 ...

  4. 自学Linux Shell11.4-重定向输入输出

    点击返回 自学Linux命令行与Shell脚本之路 11.4-重定向输入输出 Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输 ...

  5. 自学Zabbix9.1 Network Discovery 网络发现原理

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix9.1 Network Discovery 网络发现原理 1. 网络发现简介 网络 ...

  6. 51Nod 1048 1383 整数分解为2的幂

    任何正整数都能分解成2的幂,给定整数N,求N的此类划分方法的数量! 比如N = 7时,共有6种划分方法.   7=1+1+1+1+1+1+1   =1+1+1+1+1+2   =1+1+1+2+2   ...

  7. 软Raid50制作

    =====创建Raid50的步骤====== 1.创建分区[root@localhost ~]# fdisk /dev/sdb[root@localhost ~]# fdisk /dev/sdc[ro ...

  8. Flash与JavaScript互动

    最近做的一个项目需要用javascript来实现自动复制文本到剪切板,但测试时发现只有ie6.0支持. 到百度搜索后才发现,原来ie7.0.firefox是不支持这样的操作的,随后又搜索了一下,找到一 ...

  9. 斯坦福大学公开课机器学习：Neural Networks，representation: non-linear hypotheses（为什么需要做非线性分类器）

    如上图所示,如果用逻辑回归来解决这个问题,首先需要构造一个包含很多非线性项的逻辑回归函数g(x).这里g仍是s型函数(即 ).我们能让函数包含很多像这的多项式,当多项式足够多时,那么你也许能够得到可以 ...

  10. ztree更换节点图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...