如果 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. bzoj 3295 动态逆序对 （三维偏序，CDQ+树状数组）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3295 思路: 可以将这道题看成倒着插入,这样就可以转化成求逆序对数,用CDQ分治降维,正反用 ...

  2. Codeforces Round #440 (Div. 2) A,B,C

    A. Search for Pretty Integers time limit per test 1 second memory limit per test 256 megabytes input ...

  3. KEIL打开的工程所在目录过深将会编译出错

    这是一个工程所在目录过深导致的编译错误

  4. source、sh、bash

    source.sh.bash../ 执行脚本的区别 1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以 ...

  5. pacman安装软件包出现损坏

    状况 File .pkg.tar.xz is corrupted (invalid or corrupted package (PGP signature)).Do you want to delet ...

  6. A1073. Scientific Notation

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  7. 【POJ3585】Accumulation Degree 二次扫描与换根法

    简单来说,这是一道树形结构上的最大流问题. 朴素的解法是可以以每个节点为源点,单独进行一次dp,时间复杂度是\(O(n^2)\) 但是在朴素求解的过程中,相当于每次都求解了一次整棵树的信息,会做了不少 ...

  8. ORACLE常用性能监控SQL

    Temp表空间上进程的查询 select a.tablespace, b.sid, b.serial#, a.blocks,c.sql_text from v$sort_usage a,v$sessi ...

  9. Linux查看端口、进程信息

    1.linux上如何查看端口 通常情况下,某个端口号会被莫名其妙的占用了.却不知道什么东东占用了,影响心情.通过如下命令,即可查看某一个端口号是否被占用 1)lsof -i:端口号,即可查看某一端口的 ...

  10. vijos1543(极值问题)解题报告

    (n^2-m*n-m^2)^2=1 是齐次多项式,设n>=m,n=m+t(t>=0). n^2-m*n-m^2=t^2-m*t-m^2 所以(t^2-m*t-m^2)^2=1. 如果n,m ...