zoukankan      html  css  js  c++  java
  • css伪类选择器详细解析及案例使用-----伪类选择器(1)

    1. 动态伪类选择器:
      E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过。
      E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过。
      E:active :选择匹配的E元素,且匹配的元素被激活。常用于锚点与按钮上。
      E:hover :选择匹配的E元素,且用户鼠标停留在元素上。
      E:focus :选择匹配的E元素,且元素获得焦点。

      锚点伪类设置遵守“爱恨原则”,即LoVe/HAte,也就是“link-visited-hover-active”。

    2. 目标伪类选择器(此为动态选择器,只有存在URL指向该匹配元素时,样式效果才会生效)
      E:target :匹配E元素之下的子元素中,被url链接到的那个子元素。
      在下边的例子中,被#div1 :target匹配的元素是#div2,他不仅是#div1的子元素,而且被url(a标签href="#div2")指向。两条件缺一不可。(此为自我理解,非官方解释)。
      <!DOCTYPE html>
      <html>
      <head>
          <title></title>
          <style type="text/css">
              #div1 :target p{
      	    color: red;
      	};
          </style>
      </head>
      <body>
          <div id="div1">
              i am div1
      	<div id="div2">
      	    i am div2 
                  <p>pppp</p>
      	 </div>
          </div>
          <a href="#div2">click me</a>
      </body>
      </html>
      

        

    3. 语言伪类选择器:
      E:lang(language) :选择匹配E的所有元素,且匹配元素制定了lang属性,而且其值为language。
      设置文档语言有两种方法。第一,如果使用HTML5,可如此设置:
      <html lang="en-US">
      

      或者手工在文档中指定:

      <body lang="fr">
    4. UI元素状态伪类选择器:
      E:checked :匹配选中的复选按钮或单选按钮表单元素
      E:enabled :匹配所有启用的表单元素
      E:disabled :匹配所有禁用的表单元素
  • 相关阅读:
    Elasticsearch学习之基本核心概念
    Kudu,支持快速分析的新型Hadoop存储系统
    npm命令
    git相关命令
    Linux下Nodejs安装(完整详细)转
    数据库删除discuz 部分数据操作
    用tcping检查网站开放的端口
    Mybatis各种模糊查询
    抱歉,当前存在网络问题或服务器繁忙错误代码:20003问题解决方法
    win7下python2.7安装 pip,setuptools的正确方法
  • 原文地址:https://www.cnblogs.com/wangkaiyuan/p/5700186.html
Copyright © 2011-2022 走看看