如果 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. BZOJ1115[POI2009]石子游戏——阶梯Nim游戏

    题目描述 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必 ...

  2. BZOJ3750[POI2015]Pieczęć——链表

    题目描述 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色. 你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上的图案.印的过程中需要满足以下要求: ...

  3. 网络流Dinic模板

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> #d ...

  4. Leetcode 70.爬楼梯 By Python

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  5. 01 Zabbix采集数据方式

    Zabbix采集数据方式 1. zabbix采集数据方式: 基于专用agent   被监控的设备上面安装agent软件,这个agent必须在设备上面有采集数据的权限 基于SNMP,  net-snmp ...

  6. 22 Zabbix系统版本升级过程

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 22 Zabbix系统版本升级过程 Zabbix升级与其他相类似系统升级一样,前提一定做好备份,备 ...

  7. 自学Zabbix4.1 zabbix监控web服务器访问性能

    自学Zabbix4.1 zabbix监控web服务器访问性能 使用Zabbix实现对web性能的监控,通过它可以了解web站点的可用性以及性能.最终将各项指标绘制到图形中,这样我们可以了解到一个站点的 ...

  8. BZOJ 4004 [JLOI2015]装备购买 | 线性基

    题目链接 Luogu P3265 题解 非常正常的线性基! 但是我不会线性基-- (吐槽:#define double long double 才过--) #include <cstdio> ...

  9. python常见面试题（三）

    问题1 到底什么是Python?你可以在回答中与其他技术进行对比(也鼓励这样做). 答案 下面是一些关键点: Python是一种解释型语言.这就是说,与C语言和C的衍生语言不同,Python代码在运行 ...

  10. luogu3295 萌萌哒 (并查集+ST表)

    如果给相同的位置连边,最后联通块数是n,最后答案就是$9*10^{n-1}$ 但直接连边是$O(n^2)$的 所以事先处理出一个ST表,每次O(1)地给那个ST表连边 最后再一点一点下放,就是把在这层 ...