您的位置：首页 > Web前端 > CSS

CSS的三种扩展选择器

2013-04-05 16:36 309 查看

[java] view
plaincopy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>extend_select.html</title>



    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">



    



  </head>

  <style type="text/css">

    /*这样会把所有的b标签都改变样式*/

    /*b{

        background-color: yellow;

1d908
    }*/



    /*

      1,关联选择器

        这样写，就限定为span标签中的b标签了*/

    span b{

        background-color: red;

    }

    /*

      2,组合选择器

        对多个不同的对象元素进行相同的样式设定

    */

    .haha,#div1,p b{

        background-color: blue;

    }



    /*

      3,伪元素选择器

        其实就是在html中预先定义好的一些选择器，成为伪元素，是因为CSS的术语。

        格式：     1，标签名：伪元素.类名            2，标签名.类型：伪元素。都可以

        这四个伪元素不只在a标签上可以，在其他标签上也行！！！！！！！！！！！！！！！！

        a:link    超链接未点击状态

        a:visited 被访问后的状态

        a:hover      光标移到超链接上的状态（未点击）

        a:active  点击超链接时的状态

        使用顺序：L--V--H--A



        p:first-line 段落的第一行文本

        p:first-letter 段落的第一个字母





        :focus 具有焦点的元素，IE6浏览器不支持，在FireFox中可以看到效果

    */



    p:FIRST-LINE{

        background-color: red;

    }

    p:FIRST-LETTER{

        color: blue;

        font-size: 30px;

    }



    input:FOCUS{

        background-color: grey;

    }



    a:LINK {

        background-color: aqua;

        text-decoration: none;/*该属性用来设置下划线，中划线等等*/

    }

    a:VISITED {

        background-color: red;

    }

    a:HOVER {

        background-color: blue;

        font-size: 22px;

    }

    a:ACTIVE {

        background-color: fuchsia;

    }

  </style>

  <body>

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

  <br/><br/>

  <p>房价肯定是啦房间<br/>诶我发飞机快的啦附近的凯萨琳发的</p>

<br/><br/><br/><br/><br/>

        <a href="http://www.baidu.com">a标签----大一些</a>



        <br/><br/><br/><br/><br/>

     <span class="haha"><b>span</b>-------aaaaaaaaaaaaaaaaaa</span>

    <span>span-------bbbbbbbbbbbbbbb</span>

    <hr/>

    <div id="div1" class="haha"><b>div</b>----cccccccccccccccccccc</div>

    <div>div----dddddddddddddddddddddd</div>

    <hr/>

    <p class="haha">p---------eeeeeeeeeeeeeeeeeee</p>

    <p>p---------<b>fffff</b>fffffffffffff</p>

  </body>

</html>

转载于：http://blog.csdn.net/wjw_java/article/details/8022899

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css css选择器网页设计

相关文章推荐

新的分享

章节导航