[html5/css3] css3 选择器

分享到:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3中的选择器</title>
<style type="text/css">

    /*基本的id选择器*/
    #cont{
        background: indianred;
    }
    .head{
        font-family: cursive;
    }
     /*利用通配符的样式匹配*,^,$ */
    /*表示id包含cont的*/
    [id*=cont]{
        font-size: 40px;
    }
 /*以指定的id开头的属性*/
    [id^="3cont"]{
    color: blue;
    }
  /*指定以d结尾的class属性*/
    [class$="d"]{
    background: yellowgreen;
    }
  /*伪类选择器
   :first-line:
   :first_letter:
   :before:
   :after:
   a:hover:
   a:visited:
   a:active:
   a:link:

  */

    /*first-letter:首字母的样式*/
    .head:first-letter{
         color: aqua;
    }
    .head:last-child{
        font-size: 20em;
    }



    #url:visited{
        background:red;
    }
    /*鼠标点击时的样式*/
    #url:active{
        background: royalblue;
    }
    /*first-line:第一行的样式*/
    #p:first-line{
        font-size: 23px;
    }
    
    #p:before{
        content: '在指定id前添加的内容,';
    }
    #p:after{
        content: ',指定元素后面添加的内容';

    }
    /*:root伪类选择器为整个网页设置样式*/
    :root{
        background: url("http://imgs.focus.cn/upload/hs/6421/b_64203012.jpg") repeat-x;
    }

    /*:not :排除某一个属性*/
    body *:not(p){
        font-size: 50px;
    }
    /*内容为空时指定样式*/
    p:empty{
        background: red;
    }
  /*为指定的目标属性添加样式*/
    :target{
        font-size: 26em;
    }

    li:first-child{
        background: orangered;
    }
    li:last-child{
        background: purple;
    }
    /*为第二个元素添加样式或者设置为为奇数或者偶数的元素添加样式*/
    li:nth-child(odd){
        background: cyan;
    }
    /*倒数第二个添加样式*/
    li:nth-last-child(even){
        background:orchid;
    }

    li:nth-of-type(1){

        color:red;

    }
/*关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。

:nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢?

其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。

*/
    div:nth-of-type(odd){
        color: red;
    }

    /*UI元素选择器
    e:disabled:元素禁用时的选择器
    e:enabled:元素启用时的选择器

    e:read-only:
    e:read-write:


    e:checked:

    e:default:
    e:indeterminate:

    e::selection:元素被选中的时候的样式


    */
    input[type="text"]:disabled{
        background: red;
    }

    li::selection{
        color:cyan;
    }
</style>

    <script type="text/javascript">
         window.onload=function(){
             var txt = document.getElementById("text");
             txt.disabled="disabled";
         }

    </script>
</head>
<body>

 <section >
       <h1 class="head">css3中的选择器,link</h1>
     <p id="cont">基本的类选择器</p>
     <p id="3cont1">基本的类选择器</p>
     <p id="3cont-1">基本的类选择器</p>
     <p></p>
     <p id="5cont" class="324ddwd">基本的类选择器</p>
     <p id="p">伪类元素<br>各种伪类元素first-line</p>
     <p></p>
     <a href="#" id="url" >google</a>

     <a href="#t1" id="url1" >google1</a>

     <a href="#t2" id="url2" >google2</a>

     <a href="#t3" id="url3" >google3</a>



     <span id="t1">2</span>
     <span id="t2">3</span>
     <span id="t3">4</span>


 </section>
 <ul>

     <li>java</li>
     <li>python</li>
     <li>ruby</li>
     <li>OC</li>
     <li>C</li>
     <li>ANDROID</li>

 </ul>

 <div id="ls">

      <p>nth-child和nth-of-type的样式比较</p>

     <p>好好学习..<span>一定要哦..</span></p>

     <a href="#">google<p>慢慢找,慢慢学..</p>一下您遇到的问题....</a>

     <article>防水袋</article>

     <input type="text" id="text">

 </div>

</body>
</html>
昵    称:
验证码:

相关文档:

  • 第一章 Hello World – A Cross-platform Game
    本章通过制作跨平台的Helloworld来学习: 跨平台游戏背后的理论 Cocos2d-JS安装 Cocos2d-JS项目文件一览 场景(Scene)、图层(Layers)、精灵...
  • Flash学习初总结
    话说尝试了一周多的Flash编程,有些理解为什么很多程序员都不喜欢用Flash编程了。 首先,就是没有编程的难度,想要编好Flash,也就是...
  • html5 学习 关于数据库的学习---言简意赅 jquery、html、css、web
    http://www.w3school.com.cn/jquerymobile/index.asp...
  • 理解HTTP幂等性(转)
    基于HTTP协议的WebAPI是时下最为流行的一种分布式服务提供方式。无论是在大型互联网应用还是企业级架构中,我们都见到了越来越多的SO...
  • HTML5外包团队:HTML5 Canvas使用教程
    canvas元素用于在网页上绘制图形。 什么是Canvas? HTML5的canvas元素使用JavaScript在网页上绘制图像。 画布是一个矩形区域,您可以控制其...
  • HTML5之地理信息应用 获取自己的位置
    上代码: window.onload=function(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition( function(pos){ $(“lat”).innerHTML=pos...
  • Html5 视频
    video元素支持3种视频格式 格式IE9+FirefoxOperaChromeSafari Ogg No 3.5+ 10.5+ 5.0+ No MPEG4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg=带有Theora视...
  • HTML5中表单验证的8种方法(转)
    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件...
  • HTML5+javascript实现图片加载进度动画效果
    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。 图片加载完后,隐藏loading效果。 想看加载效果,请ctr...
  • HTML5的local storage存储的数据到底存到哪去了
    原文地址:http://zhidao.baidu.com/link?url=m6p5MLv0R46lDCd_Vnrry4XOMbdCwgV5fzs3tj5Jeyht1nPkAZ9OrO23njYBY15UMobx63X1MdP-EwKKqerm-_zSugwqqLin_TsClwOrH_O 基本使用...
  • editplus中html的自动补全功能
    之前一直都是“纯手工”,一个一个符号慢慢敲的,现在编码量大了,自然效率也不能还停留在一个一个慢慢敲的时代。...
  • HTML5进度条progress的使用
    HTML5进度条progress的使用 <!DOCTYPEhtml> <html><head> <metacharset="utf-8"/> <title>progress元素的使用</title> </head>...
  • 使用pjax实现类似github无刷新更改页面url
    pjax=pushState+ajax,相信用过github的同学都知道,github部分页面采用了pjax这个项目来实现ajax无刷新加载的同时改变页面url。一起来学习一下...
  • html5
    /* HTML5Shivv3.7.0|@afarkas@jdalton@jon_neal@rem|MIT/GPL2Licensed */ (function(l,f){functionm(){vara=e.elements;return"string"==typeofa?a.split(""):a}...
  • HTML5表单提示placeholder属性兼容IE
    placeholder属性提供可描述输入字段预期值的提示信息(hint)。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 注释:plac...
  • 移动前端不得不了解的html5 head 头标签
    DOCTYPE DOCTYPE(DocumentType),该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种HTML或者XHTML规范。 使用HTML5...
  • JAVA spring mvc +mybatis(oracle 和 mysql) HTML5
    说明:JAVASpringMVC+mybatis(oracle和mysql)HTML5全新高大尚后台框架bootstrap(可换皮肤) 1.支持APP手机应用(android和ios)接口调用 2.全新高大尚HTML5+...
  • html标签嵌套
    发现问题:p标签中嵌套p标签导致页面解析出来的结构错误。然后外层p标签换div就不会出现问题。 HTML4/XHTML的嵌套规则 <p>元素和<...
  • Hybrid框架UI重构之路:一、师其长技以自强
    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路。混合应用这种开发方式降低开发难度,极大...
  • html5 css3 +zepto 做动画
    刚解除别人的案例,感觉像一座大山,如何才能啃完这座大山呢,可能到了山顶的时候,回头看看也许并没有想象中的可怕。现在看,真...