如果 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. Uva1001-floyd算法-建图

    给出一些球,球内的时间为零,球之间的速度为10每单位. 给两个点,求最短时间. 把每一个球当做点,球间的距离就是floyd的d数组.之后跑一遍floyd wa了两发因为d数组定义成int了 #incl ...

  2. codeforces 797B

    B. Odd sum time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  3. 自学Python2.8-条件(if、if...else）

    自学Python之路 自学Python2.8-条件(if.if...else) 1.if 判断语句 if语句是用来进行判断的,其使用格式如下:  if 要判断的条件: 条件成立时,要做的事情 当“判断 ...

  4. 【CF960G】Bandit Blues（第一类斯特林数,FFT）

    [CF960G]Bandit Blues(第一类斯特林数,FFT) 题面 洛谷 CF 求前缀最大值有\(a\)个,后缀最大值有\(b\)个的长度为\(n\)的排列个数. 题解 完完全全就是[FJOI] ...

  5. 【BZOJ1925】[SDOI2010]地精部落（动态规划）

    [BZOJ1925][SDOI2010]地精部落(动态规划) 题面 BZOJ 洛谷 题解 一道性质\(dp\)题.(所以当然是照搬学长PPT了啊 先来罗列性质,我们称题目所求的序列为抖动序列: 一个抖 ...

  6. Linux 系统缓存机制学习

    前言:本文为参考他人的文章,是一篇学习记录型博客.理解linux的系统缓存机制有助于理解elasticsearch实时更新的原理. 一.缓存机制 为了提高文件系统性能,内核利用一部分物理内存分配出缓冲 ...

  7. A1102. Invert a Binary Tree

    The following is from Max Howell @twitter: Google: 90% of our engineers use the software you wrote ( ...

  8. centos服务重启

    重启openstack的整个服务openstack-service restart 1. 重启dashboardservice httpd restart service memcached rest ...

  9. （JAVA保留小数问题，基础）Probability hdu2131

    Probability 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2131 Time Limit: 3000/1000 MS (Java/Others) ...

  10. 一个简单的加载动画，js实现

    简单效果图: html: <div class="box"> <ul> <li></li> <li></li> ...