如果 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. Django-website 程序案例系列-18 多表跨表操作优化

    详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化 在数据库有外键的时候,使用 select_related() 和 pref ...

  2. G1收集器的收集原理

    G1收集器的收集原理 来源 http://blog.jobbole.com/109170/ JVM 8 内存模型 原文:https://blog.csdn.net/bruce128/article/d ...

  3. 洛谷 P3965 [TJOI2013]循环格 解题报告

    P3965 [TJOI2013]循环格 题目背景 一个循环格就是一个矩阵,其中所有元素为箭头,指向相邻四个格子. 每个元素有一个坐标(行,列),其中左上角元素坐标为\((0,0)\).给定一个起始位\ ...

  4. 树莓派上使用Pi-FM-RDS工具打造FM调频电台

    安装Pi-FM-RDS 安装依赖.sudo apt-get install libsndfile1-dev 克隆Pi-FM-RDS到本地.git clone https://github.com/Ch ...

  5. [luogu1655][小朋友的球]

    luogu1665 思路 一道第二类斯特兰数的模板题.只不过需要写个高精. f[i][j]表示前i个球放到j个盒子里的方案数.第i个球可以单独一个盒子,所以f[i][j]+=f[i-1][j-1].还 ...

  6. 工具函数判断data为整型字符串

    /** * 如果data是整型字符串,则转为整型,否则原样返回 * @param {*} data 整型字符串 */ export const stringToInt = (data) => { ...

  7. SpaceNet 数据集

    SpaceNet 数据集 SpaceNet是DigitalGlobe商业卫星公司提供的遥感图像集合,包含一些标记信息可用作机器学习研究. SpaceNet Challenge主页: https://s ...

  8. bin内置函数

    光棍们对1总是那么敏感,因此每年的11.11被戏称为光棍节.小Py光棍几十载,光棍自有光棍的快乐.让我们勇敢地面对光棍的身份吧,现在就证明自己:给你一个整数a,数出a在二进制表示下1的个数,并输出. ...

  9. Linux网络协议栈(一)——Socket入门(1)

    转自: http://www.cnblogs.com/hustcat/archive/2009/09/17/1568738.html 1.TCP/IP参考模型为了实现各种网络的互连,国际标准化组织(I ...

  10. 任意输入一串字符串，求该字符串中字符的出现次数并打印出来，如输入“bcaba”输出：b 2 c 1 a 2

    前言:其实我还是有点不懂,有点郁闷了,算了直接把代码放上去把. 方法一: Scanner input=new Scanner(System.in); System.out.println(" ...