如果 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. jquery 取id模糊查询

    [属性名称] 匹配包含给定属性的元素[att=value] 匹配包含给定属性的元素 (大小写区分)[att*=value] 模糊匹配[att!=value] 不能是这个值[att$=value] 结尾 ...

  2. Java 关键字final的一小结

     * final类不能被继承,没有子类,final类中的方法默认是final的.  * final方法不能被子类的方法覆盖,但可以别继承  (方法)  * final 成员变量 表示常量,只能被赋值一 ...

  3. 【转】hex和bin文件格式的区别

    hex和bin文件格式的区别 Intel HEX文件是记录文本行的ASCII文本文件,在Intel HEX文件中,每一行是一个HEX记录,由十六进制数组成的机器码或者数据常量.Intel HEX文件经 ...

  4. 洛谷 P1378 油滴扩展 改错

    P1378 油滴扩展 题目描述 在一个长方形框子里,最多有\(N(0≤N≤6)\)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油 ...

  5. python 忽略警告

    import warningswarnings.filterwarnings("ignore")看起来整洁一点...

  6. [SDOI2016]储能表——数位DP

    挺隐蔽的数位DP.少见 其实减到0不减了挺难处理.....然后就懵了. 其实换个思路: xor小于k的哪些都没了, 只要留下(i^j)大于等于k的那些数的和以及个数, 和-个数*k就是答案 数位DP即 ...

  7. A1019. General Palindromic Number

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...

  8. A1048. Find Coins

    Eva loves to collect coins from all over the universe, including some other planets like Mars. One d ...

  9. 枚举 enum 成员变量初始化

    typedef enum { A1, A2, A3, A4 = , A_END }A; 如果A1赋值为5,则下列依次递增1,即A2等于6,A3等于7: 由于A4赋值为10,所以A_END等于11 如果 ...

  10. IP基本原理

    IP基本原理 一.IP基本原理 IP是网络层协议,也是当今应用最广泛的网络协议之一 IP协议规定了数据的封装方式,网络节点的标识方法,用于网络上数据的端到端的传递. 1.IP及其相关协议 2.IP的主 ...