利用伪类组合,可以用css代替js以达到目的,少些一下js
.textarea:empty:before {
display: block;
content: '请输入';
color: #ababab;
font-size: 15px;
text-align: left;
}
//表示:当textarea元素为空时即没有输入时,有“请输入”这句提示语显示 .textarea:focus:before {
display: none;
}
//当textarea元素聚焦时,刚刚用before伪类加的“请输入”就会隐藏 .textarea:empty:after {
   content: '请认真填写。';
color: #ababab;
font-size: 11px;
text-align: left;
}
.textarea:focus:focus {
display: none;
}
first-child:after
.order:empty+.a {
display: block;
}
//order元素为空时,它下面的那个元素a显示

css伪类的组合用法的更多相关文章

  1. 关于css伪类:hover的用法

    关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...

  2. 彻底搞懂CSS伪类选择器:is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  3. CSS伪类选择器:is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

  4. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  5. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  6. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  7. CSS伪类的理解

    因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只 ...

  8. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  9. CSS伪类before,after制作左右横线中间文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 百度地图API-控件

    初始化百度地图的基础方法我们已经学会了,那么,想让我们的地图展示的更美观,体验度更好,自然离不开百度地图API给我们提供的丰富的插件.同时呢,我们还可以通过Control类自定义控件.那么,百度地图A ...

  2. Servlet 3.0/3.1 中的异步处理

    在Servlet 3.0之前,Servlet采用Thread-Per-Request的方式处理请求,即每一次Http请求都由某一个线程从头到尾负责处理.如果一个请求需要进行IO操作,比如访问数据库.调 ...

  3. jenkins gradle 编译遇到tomcat异常

    使用gradle在jenkins 上构建的时候遇到 进行构建的时候报"Could not load Logmanager org.apache.juli.ClassLoaderLogMana ...

  4. mysql数据库开启慢查询日志

    修改配置文件 在配置文件my.ini中加上下面两句话 log-slow-queries = C:\xampp\mysql_slow_query.log long_query_time=3 第一句使用来 ...

  5. css基础学习---简单理解

    1:在css中定义图片相对路径 #primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: ...

  6. 遍历Arraylist的方法

    package com.test; import java.util.ArrayList; import java.util.Iterator; import java.util.List; publ ...

  7. shell中的readonly

    readonly用来定义只读变量,一旦使用readonly定义的变量在脚本中就不能更改 测试脚本 #!/bin/sh readonly a='haha' echo a a='xixi' //更改变量的 ...

  8. strtol函数 将字符串转换为相应进制的整数

    转自http://hi.baidu.com/qwpsmile/blog/item/9bc44efa4f41018a9f514637.html +----------------+|      strt ...

  9. HTML5 的WebSocket

    认识HTML5的WebSocket

  10. 手机自动化测试:appium源码分析之bootstrap九

    手机自动化测试:appium源码分析之bootstrap九   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣, ...