如果 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. 关于mysql的压测sysbench

    测试表格:CREATE TABLE `sbtest` ( `id` int(10) unsigned NOT NULL auto_increment, `k` int(10) unsigned NOT ...

  2. C# 枚举值 （二） 多属性 操作

    很多时候,我们的枚举值可能需要中英文, 那么可以使用下面的方法: 下面这个类,包含2部分. 1 BaseDescriptionAttribute特性的重载 2 枚举的操作类 EnumOperate n ...

  3. P2707 Facer帮父亲

    题目背景 Facer可是一个孝顺的孩纸呦 题目描述 Facer的父亲是一名经理,现在总是垂头丧气的. Facer问父亲,怎么啦?父亲说,公司出了点问题啊. 公司管理着N个风景点,每个风景点都有不少人来 ...

  4. day 变量的赋值原理 变量的命名规则

    print(3*4*5*6/2) #简单的计算输出 x=3 y=4 print("x乘以y=",x*y) #运行5分钟 = 12 print(x*y) #在运行5分钟 = 12 ' ...

  5. 自学Aruba4.2-Aruba AC基础配置(1)

    点击返回:自学Aruba之路 自学Aruba4.2-Aruba AC基础配置(1) 管理员登陆(admin/saic_admin): Cli Web 管理帐号 控制器基础设置: 控制器恢复出厂设置 查 ...

  6. BZOJ 3503 [CQOI2014]和谐矩阵

    题目链接 BZOJ 3503 题解 没想到--直接用暴力的\(O((nm)^3)\)算法,居然能过?! 高斯消元解异或方程组. #include <cstdio> #include < ...

  7. 洛谷 P1381 单词背诵 解题报告

    P1381 单词背诵 题目描述 灵梦有\(n\)个单词想要背,但她想通过一篇文章中的一段来记住这些单词. 文章由\(m\)个单词构成,她想在文章中找出连续的一段,其中包含最多的她想要背的单词(重复的只 ...

  8. bzoj1492/luogu4027 货币兑换 (斜率优化+cdq分治)

    设f[i]是第i天能获得的最大钱数,那么 f[i]=max{在第j天用f[j]的钱买,然后在第i天卖得到的钱,f[i-1]} 然后解一解方程什么的,设$x[j]=\frac{F[j]}{A[j]*Ra ...

  9. 单片机如何产生PWM信号

    用89C52产生控制二相步进电机的程序,用PWM信号控制步进电机 用普通I/O口采用软件定时器中断可以模拟PWM输出 /*采用6MHz晶振,在P1.0脚上输出周期为2.5s,占空比为20%的脉冲信号* ...

  10. Linux中禁用命令历史记录

    关闭history记录功能 set +o history 打开history记录功能 set -o history 清空记录 history -c 记录被清空,重新登录后恢复. rm -f $HOME ...