如果 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. python3网络爬虫（2.1）：爬取堆糖美女

    额,明明记得昨晚存了草稿箱,一觉醒来没了,那就简写点(其实是具体怎么解释我也不太懂/xk,纯属个人理解,有错误还望指正) 环境: 版本:python3 IDE:pycharm2017.3.3 浏览器: ...

  2. OpenAI 开源机器人模拟 Python 库，并行模拟处理速度提升400%

    10000da.cnvboyule.cnjiaeidaypt.cn  在过去一年的研究中,OpenAI团队开源一个使用 MuJoCoengine开发的用于机器人模拟的高性能Python库.雷锋网了解到 ...

  3. 导出SharePoint2013用户及权限

    cls Add-PSSnapin Microsoft.SharePoint.PowerShell -ea 0 $site = New-Object Microsoft.SharePoint.SPSit ...

  4. 洛谷 P4345 [SHOI2015]超能粒子炮·改 解题报告

    P4345 [SHOI2015]超能粒子炮·改 题意 求\(\sum_{i=0}^k\binom{n}{i}\),\(T\)组数据 范围 \(T\le 10^5,n,j\le 10^{18}\) 设\ ...

  5. XML解析（DOM、ElementTree）及转换为JSON

    xml.dom篇 DOM是Document Object Model的简称,XML 文档的高级树型表示.该模型并非只针对 Python,而是一种普通XML 模型.Python 的 DOM 包是基于 S ...

  6. centos6.5安装VNC、远程及启动关闭

    标签: centos vnc 远程桌面 安装 详解 0.说明 安装服务的过程当中,最好是在联网环境下操作.由于涉及到远程连接的问题,系统的防火墙需要关闭,或者是做好相应的过滤策略.参考了网上很多大牛的 ...

  7. operator new，new operator,placement new的区别

    原文地址:http://www.cnblogs.com/jamesmile/archive/2010/04/17/1714311.html,在此感谢 C++中的operator new与new ope ...

  8. 求解100以内的所有素数（问题来自PythonTip）

    求解100以内的所有素数 (AC/Submit)Ratio(4615|22542)20.47% 描述: 输出100以内的所有素数,素数之间以一个空格区分(注意,最后一个数字之后不能有空格). a=[2 ...

  9. js,mui,jq 操作基本的DOM

    一.HTML <ul> <li>1111111</li> <li>22222222</li> </ul> 二.CSS li{ h ...

  10. textarea 字体限制，超出部分不显示并及时显示还剩字体个数

    1)HTML <textarea class="box" ></textarea > 2)JQ: $(function(){ $(".box&qu ...