如果 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. BZOJ3152[Ctsc2013]组合子逻辑——堆+贪心

    题目链接: BZOJ3152 题目大意: 一开始有一个括号包含[1,n],你需要加一些括号,使得每个括号(包括一开始的)所包含的元素个数要<=这个括号左端点那个数的大小,当一个括号包含另一个括号 ...

  2. 快乐的Lambda表达式（一）

    转载:http://www.cnblogs.com/jesse2013/p/happylambda.html 原文出处: Florian Rappl   译文出处:Jesse Liu 自从Lambda ...

  3. OCIEnvCreate 失败，返回代码为 -1，但错误消息文本不可用

    解决方案:oracle 版本太低,请装11G或以上版本..

  4. LOJ #2802. 「CCC 2018」平衡树(整除分块 + dp)

    题面 LOJ #2802. 「CCC 2018」平衡树 题面有点难看...请认真阅读理解题意. 转化后就是,给你一个数 \(N\) ,每次选择一个 \(k \in [2, N]\) 将 \(N\) 变 ...

  5. LOJ #2538. 「PKUWC 2018」Slay the Spire (期望dp)

    Update on 1.5 学了 zhou888 的写法,真是又短又快. 并且空间是 \(O(n)\) 的,速度十分优秀. 题意 LOJ #2538. 「PKUWC 2018」Slay the Spi ...

  6. 【Luogu4921】情侣？给我烧了！（组合计数）

    [Luogu4921]情侣?给我烧了!(组合计数) 题面 洛谷 题解 很有意思的一道题目. 直接容斥?怎么样都要一个平方复杂度了. 既然是恰好\(k\)对,那么我们直接来做: 首先枚举\(k\)对人出 ...

  7. SharePoint 2013 首页修改

    最近客户要求统一首页的风格,所以对各网站的首页进行了统一的修改. 1. 左边导航菜单修改: 修改的地方: Site Settings –> Look and feel –> Navigat ...

  8. python 线程间事件通知

    这是线程间最简单的通信机制:一个线程发送事件,其他线程等待事件事件机制使用一个内部的标志,使用set方法进行使能为True,使用clear清除为falsewait方法将会阻塞当前线程知道标记为True ...

  9. hdu 2870 Largest Submatrix(平面直方图的最大面积 变形)

    Problem Description Now here is a matrix with letter 'a','b','c','w','x','y','z' and you can change ...

  10. UVALive - 6439（思维题）

    题目链接:https://vjudge.net/contest/241341#problem/F 题目大意:给你一个字符串,你可以用任意单个字符代替其中的一个子串,使它形成一个回文串,要求形成的回文串 ...